Styled-components is a popular library for styling React components using tagged template literals, which allows you to write plain CSS in your JavaScript files. Here’s how to use styled-components in a React project
Installation
First, you need to install the styled-components library
npm install styled-components
Basic Usage
Create styled components by importing the styled object and defining your components using template literals.
import React from 'react';
import styled from 'styled-components';
// Define a styled button component
const Button = styled.button`
background-color: blue;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
&:hover {
background-color: darkblue;
}
`;
const App = () => {
return <Button>Click Me</Button>;
};
export default App;
Dynamic Styles
You can create dynamic styles based on props
import React from 'react';
import styled from 'styled-components';
// Define a styled button component with dynamic styles
const Button = styled.button`
background-color: ${(props) =>
(props.primary ? 'blue' : 'gray')};
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
&:hover {
background-color: ${(props) =>
(props.primary ? 'darkblue' : 'darkgray')};
}
`;
const App = () => {
return (
<div>
<Button primary>Primary Button</Button>
<Button>Secondary Button</Button>
</div>
);
};
export default App;
Extending Styles
You can extend the styles of an existing styled component
import React from 'react';
import styled from 'styled-components';
// Define a styled button component
const Button = styled.button`
background-color: blue;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
`;
// Extend the button component
const LargeButton = styled(Button)`
padding: 20px;
font-size: 1.5em;
`;
const App = () => {
return (
<div>
<Button>Normal Button</Button>
<LargeButton>Large Button</LargeButton>
</div>
);
};
export default App;
Theming
You can use a ThemeProvider to provide a theme to your styled components
theme.js
export const theme = {
primaryColor: 'blue',
secondaryColor: 'gray',
};
App.js
import React from 'react';
import styled, { ThemeProvider } from
'styled-components';
import { theme } from './theme';
// Define a styled button component with theme
const Button = styled.button`
background-color: ${(props) =>
props.theme.primaryColor};
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
&:hover {
background-color: darkblue;
}
`;
const App = () => {
return (
<ThemeProvider theme={theme}>
<Button>Click Me</Button>
</ThemeProvider>
);
};
export default App;
Global Styles
You can also define global styles using the createGlobalStyle helper.
Global Style.js
import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
`;
export default GlobalStyle;
App.js
import React from 'react';
import { ThemeProvider } from 'styled-components';
import GlobalStyle from './globalStyles';
import { theme } from './theme';
import styled from 'styled-components';
// Define a styled button component with theme
const Button = styled.button`
background-color: ${(props) =>
props.theme.primaryColor};
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
&:hover {
background-color: darkblue;
}
`;
const App = () => {
return (
<ThemeProvider theme={theme}>
<GlobalStyle />
<Button>Click Me</Button>
</ThemeProvider>
);
};
export default App;
Styled-components provide a powerful and flexible way to style your React applications, allowing you to write actual CSS code within your JavaScript files while taking advantage of React’s component-based architecture
