CSS-in-JS in React
Modern React applications often require dynamic, reusable, and scoped styling. CSS-in-JS is a popular approach that allows you to write CSS directly inside JavaScript files, keeping your styles close to the components they belong to.
Two of the most widely used libraries for CSS-in-JS are Styled Components and Emotion.
Why CSS-in-JS?
- Scoped Styles: Styles are automatically scoped to a component, preventing global conflicts.
- Dynamic Styling: You can change styles using props or state.
- Reusable Components: Components carry their styles, making them modular.
- Conditional Logic: Apply different styles based on logic or state.
- Theming: Centralized themes allow consistent design across the app.
Styled Components
Styled Components uses tagged template literals to create React components with scoped styles.
Installation
npm install styled-components
# or
yarn add styled-components
Example:
import React from "react";
import styled from "styled-components";
// Styled button component
const Button = styled.button`
background-color: #007bff;
color: white;
padding: 10px 20px;
border-radius: 5px;
border: none;
cursor: pointer;
&:hover {
background-color: #0056b3;
}
`;
function App() {
return <Button>Click Me</Button>;
}
export default App;
styled.buttoncreates a Button component with scoped styles.- Supports pseudo-classes, media queries, and dynamic styling.
Dynamic Styling with Props
props.primary allows buttons to change style dynamically.
const Button = styled.button`
background-color: ${(props) =>
props.primary ? "#007bff" : "#6c757d"};
color: white;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
`;
function App() {
return (
<div>
<Button primary>Primary</Button>
<Button>Secondary</Button>
</div>
);
}
Theming with Styled Components
ThemeProvider passes theme values to all styled components.
import { ThemeProvider } from "styled-components";
const theme = {
primaryColor: "#007bff",
secondaryColor: "#6c757d",
};
const Button = styled.button`
background-color: ${(props) => props.theme.primaryColor};
color: white;
padding: 10px 20px;
border-radius: 5px;
`;
function App() {
return (
<ThemeProvider theme={theme}>
<Button>Primary Button</Button>
</ThemeProvider>
);
}
Emotion
Emotion is another popular CSS-in-JS library that supports both styled components syntax and object-based styling.
Installation
npm install @emotion/react @emotion/styled
# or
yarn add @emotion/react @emotion/styled
Example:
/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";
function App() {
const buttonStyle = css`
background-color: #007bff;
color: white;
padding: 10px 20px;
border-radius: 5px;
border: none;
cursor: pointer;
&:hover {
background-color: #0056b3;
}
`;
return <button css={buttonStyle}>Click Me</button>;
}
export default App;
Styled API in Emotion
Emotion also supports a Styled Components-like API:
- Works almost identical to Styled Components.
- Dynamic props and nested styles are supported.
import styled from "@emotion/styled";
const Button = styled.button`
background-color: ${(props) => (props.primary ? "#007bff" : "#6c757d")};
color: white;
padding: 10px 20px;
border-radius: 5px;
`;
function App() {
return (
<div>
<Button primary>Primary</Button>
<Button>Secondary</Button>
</div>
);
}
export default App;