Styled component is a very useful and convenient library for react styling. Although there are many other choices (or you don’t even need to use as you can directly apply css) there is a definite advantage such as performance.
Install
Make sure react app is created by running the following command
> npx create-react-app <your app name>
After successful creation, run
> npm install styled-components
Basic Usage
Let’s create a button react component and apply some css. In order to use styled component you just need to choose styled.<component> – in this case I used button but you can use div, h1, span and etc – and apply css styles there.
There is more than just normal css support. You can apply javascript logic in order to decide certain styles based on provided props. As you can see in the example code ‘p’ represents prop.
Styled component also supports bulk styling selection by using css.
// Button.js
import React from 'react';
import styled, {css} from "styled-components";
const ButtonContainer = styled.button`
color: white;
background: ${p => p.secondary ? 'black' : '#f8049c'};
font-weight: bold;
${p => p.large ? css`
padding: 10px;
border-radius: 5px;
font-size: 1.5em;
` : css`
padding: 8px;
border-radius: 4px;
font-size: 1em;
`}
box-shadow: none;
border: one;
width: 100%;
display: block;
white-space: none;
&:disabled{
background: #eee;
color: #666;
}
`;
function Button(props) {
return <ButtonContainer {...props}/>
}
export {Button};You can also apply global styles so you don’t have to copy code every place.
In order to have global style make sure
- import ‘createGlobalStyle’ from styled components
- create global style and apply css
- render the created component in App
import React from 'react';
import {Button} from 'components/common';
import {createGlobalStyle} from 'styled-components';
const GlobalStyle = createGlobalStyle`
body {
background: white;
min-height: 100vh;
margin: 0;
color: black;
font-family: 'Kaushan Script';
}
`;
function App() {
return (
<>
<GlobalStyle />
<h1>App</h1>
<Button primary>
Primary Test
</Button>
<Button secondary>
Secondary Test
</Button>
<Button large>
Large Test
</Button>
</>
);
}
export default App;