Styling and Theming with React and Emotion CSS Prop

meti

August 2, 2023

blog

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>

view raw 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>

view raw 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]} />
	}

view raw 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.

css, Css In Js, Emotion, JS, React, Styled Components, Theming