[go: up one dir, main page]
Scribd
Upload
12 views4 pages

Styled Components Guide

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
12 views4 pages

Styled Components Guide

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
You are on page 1/ 4

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 = styled.div\`

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 = styled.button\`

background: \${(props) => (props.primary ? '#6200ee' : '#ccc')};

color: \${(props) => (props.primary ? '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 = styled.div\`

width: 100px;

height: 100px;

background: \${(props) => (props.active ? 'green' : 'gray')};

\`;

function App() {

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

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

Theme Support

// theme.js

Page 3
Styled-Components Guide for React Developers

export const theme = {

primary: '#4caf50',

danger: '#f44336',

};

// App.jsx

import { ThemeProvider } from 'styled-components';

import { theme } from './theme';

<ThemeProvider theme={theme}>

<App />

</ThemeProvider>

const Button = styled.button\`

background: \${(props) => props.theme.primary};

\`;

Page 4

You might also like