Styled Components - CSS in JS for React

Styled components is a React.js for CSS within JSX. This means we can write CSS directly in our components' files. But why should we do it? This concept enables us to make CSS more dynamic. For example, we can use state and props to define our CSS. In the build process, styled-components doesn't bundle our CSS into a .css file.
Hello world in styled components
import styled from 'styled-components'
const StyledH1 = styled.h1`
color: green;
font-family: Arial, Helvetica, sans-serif;
`
function App() {
return <StyledH1>Hello world</StyledH1>
}
Getting started with styled-components
Getting started is easy. All you need to do is install the required package to get a first up and running example.
Run: npm install styled-components
or: yarn add styled-components
Then, import styled components as in the example above with: import styled from "styled-components"
Now, let's learn the absolute basics.
Basics of styled-components
There are two things you should now.
- Use CSS as you know it
When using CSS natively in React, you are forced to use this weird JS-compatible syntax, which turns
font-famly: Arial
intofontFamily: Arial
. The reason is, that CSS's-
and other characters would mislead the compilation process. In styled-components, all the CSS is wrapped into a string. Therefore, you can use CSS as you know it. - Call the element you want to style
At first, styled-components' sytnax looks a bit weird. You don't need to care so much about it. Just make sure you
call the HTML element as an attribute on the styled-function and set the backticks directly behind it. That's it.
styled.p`, styled.div`
and so on.