React has made building complex UI components painless and fun. However, styling hundreds of reusable components with CSS stylesheet can often be unpredictable. Poor class naming could accidentally overlap with other styles, specificity issues caused by CSS injection order and the list goes on. CSS stylesheet just wasn’t built for styling component-based approach. So hence here’s a solution…
Emotion is one of the most popular CSS-in-JS libraries offering flexible ways to style components in JS either can be written with string or object styles. By introducing css prop, styling React component just feels really natural.
Why CSS prop for styling?
- Similar to native inline style prop but more powerful
- Styles live within the component level
- Manipulate styles with props/state dynamically
- Automatically vendor prefixed
- Easy Theming
Getting started
First, let’s install the dependencies to your project:
npm install @emotion/core
with babel (optional but recommended):
npm install –save-dev @emotion/babel-preset-css-prop
Installing this babel plugin will allow you to have access to css prop out of the box, as well as other tools for debugging in development
// .babelrc
{
“presets”: [
“@babel/preset-env”,
“@babel/preset-react”,
“@emotion/babel-preset-css-prop” // <- add this line
]
}
without babel (quick way to try out emotion):
/** @jsx jsx */
import { jsx } from “@emotion/core”;
This is required for every file that uses css prop. This could be annoying but would not hurt in a small project.
Basic usage
Just like styling with style prop, but replace it withcss prop. Additionally, you can use pseudo-selector like &:hover: {…}and media queries like @media(min-width: 800px)
| <div css={{ | |
| color: “orange”, | |
| ‘&:hover’: { | |
| color: “royalblue” | |
| } | |
| }}> | |
| Hello World! | |
| </div> |
css-prop-example-1.js hosted with ❤ by GitHub
Simple right?
Don’t like using an object? Try string (Template literals)
| import { css } from “@emotion/core”; | |
| <div css={css` | |
| color: orange; | |
| &:hover { | |
| color: royalblue; | |
| } | |
| `}> | |
| Hello World! | |
| </div> |
css-prop-exmaple-1-string.js hosted with ❤ by GitHub
Don’t forget to import css from @emotion/core
Style with props and extend styles
Notice that {…props} spreads the parent’s props to the inner div element so that the parent component can extend the child’s style by passing cssprop and add synthetic events such as onClick.
Result:
Theming
Get started with an npm install:
npm install emotion-theming
Setup:
Usage:
By placing ThemeProvider at the top level of the React component tree, the theme object can now be accessed through the css prop by just passing a function.
simply works by adding “theme =>”
Compose styles together
Emotion can merge multiple sets of styles together to save some work from repetitive styling.
| const circleStyle = { | |
| borderRadius: “50%”, | |
| background: “royalblue”, | |
| width: 50, | |
| height: 50 | |
| } | |
| const borderStyle = { | |
| border: “5px solid orange” | |
| } | |
| function CircleWithBorder() { | |
| return <div css={[circleStyle, borderStyle]} /> | |
| } |
css-prop-composition.js hosted with ❤ by GitHub
Practical Example — Put it all together:
Click ‘Open in Editor’ and have a go to see what you can do!
Continue on your journey…
Emotion provides a powerful toolset for us to handle styling with confidence. It allows us to focus more time on tackling other challenging issues. As the project codebase grows, harder it is to keep your project and files maintainable and scalable. But that’s a topic for another time. Thanks for reading and until next time.
