Scribd
Upload
7 views4 pages

Styled-Components for React Developers

Styled-Components is a CSS-in-JS library for React that allows developers to write CSS within JavaScript using ES6 template literals. The guide covers basic usage, dynamic styling with props, pseudo-classes, media queries, component state styling, and theme support. It provides code examples demonstrating how to implement these features in React applications.

Uploaded by

Adebayo Adetayo
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views4 pages

Styled-Components for React Developers

Styled-Components is a CSS-in-JS library for React that allows developers to write CSS within JavaScript using ES6 template literals. The guide covers basic usage, dynamic styling with props, pseudo-classes, media queries, component state styling, and theme support. It provides code examples demonstrating how to implement these features in React applications.

Uploaded by

Adebayo Adetayo
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Styled-Components Guide for React Developers

Introduction

Styled-Components is a modern CSS-in-JS styling library used in ReactJS and React Native. It allows you to

write actual CSS inside your JavaScript, using ES6 template literals.

Basic Usage

import styled from 'styled-components';

const Box = [Link]\`

background: #1e90ff;

color: white;

padding: 20px;

border-radius: 10px;

\`;

function App() {

return <Box>Hello Styled-Components!</Box>;

Dynamic Styling with Props

Page 1
Styled-Components Guide for React Developers

const Button = [Link]\`

background: \${(props) => ([Link] ? '#6200ee' : '#ccc')};

color: \${(props) => ([Link] ? 'white' : 'black')};

padding: 10px 20px;

border-radius: 5px;

\`;

function App() {

return (

<>

<Button primary>Primary</Button>

<Button>Default</Button>

</>

);

Pseudo-classes and Media Queries

const Link = styled.a\`

color: #0077cc;

text-decoration: none;

&:hover {

color: #ff6600;

Page 2
Styled-Components Guide for React Developers

@media (max-width: 600px) {

font-size: 14px;

\`;

Styling Based on Component State

const Toggle = [Link]\`

width: 100px;

height: 100px;

background: \${(props) => ([Link] ? 'green' : 'gray')};

\`;

function App() {

const [on, setOn] = useState(false);

return <Toggle active={on} onClick={() => setOn(!on)} />;

Theme Support

// [Link]

Page 3
Styled-Components Guide for React Developers

export const theme = {

primary: '#4caf50',

danger: '#f44336',

};

// [Link]

import { ThemeProvider } from 'styled-components';

import { theme } from './theme';

<ThemeProvider theme={theme}>

<App />

</ThemeProvider>

const Button = [Link]\`

background: \${(props) => [Link]};

\`;

Page 4

You might also like