It can be difficult to style a React app, especially if your styles need to be organized and maintained. Emotion provides a higher level abstraction over CSS to help simplify the process.
What is Emotion?
Emotion is an efficient and simple library that styles React applications. It lets you write CSS in JavaScript, and offers a flexible API to style your components.
Emotion is a great way to manage styles in React applications. You can, for example, use the same class name in multiple components and avoid the naming conflicts that occur while working with CSS/SASS.
This allows you to avoid conflicts with other styles on the page and make your code more modular and reusable. This allows you to avoid clashes with other styles and makes your code more modular.
How to Install Emotion
Run the following command to add the Emotion library into your React application:
npm install --save @emotion/react
Install the Emotion library in your React project. It is now ready for you to use it to style your application.
Style Using Emotion Prop’s css
After installing the Emotion library you can use the cssprop to style your React app. The cssprop is similar to style prop in that you can pass styles as strings or JavaScript objects.
You must first import the @emotion/react libraries to style your application.
/** @jsxImportSource @emotion/react */
import React from 'react';
import {css} from '@emotion/react';
function App() {
return (
<button css={css`
padding: 0.5rem 1rem;
border: none;
font-family: cursive;
border-radius: 12px;
color: #333333;
background-color: inherit;
margin-block-start: 2rem;
margin-block-end: 2rem;
`}>
Click Me
</button>
)
}
export default App;
The first line, /**@jsxImportSource@emotion/react*/ is a comment that you can add to a JSX file in order to specify that Emotion should be the JSX pragma used for the file.
A pragma in JSX is a function which transforms JSX syntax to regular JavaScript. React by default uses the React.createElement JSX pragma. You can use a different pragma by using the @jsxImportSource.
The @emotion/react pragma instructs JSX that it should use the jsx from the Emotion Library to transform the JSX. You can add the pragma to a JSX code and use the Emotion library’s CSS-in JS features.
The button component renders the button with custom styling. Here, the CSS prop is used to add the custom styling.
The CSS prop supports nested style. You can nest styles within other styles using nested styling.
As an example:
/** @jsxImportSource @emotion/react */
import React from 'react';
import {css} from '@emotion/react';
function App() {
return (
<button css={css`
padding: 0.5rem 1rem;
border: none;
font-family: cursive;
border-radius: 12px;
color: #333333;
background-color: inherit;
margin-block-start: 2rem;
margin-block-end: 2rem;
&:hover{
color: #e2e2e2;
background-color: #333333;
}
`}>
Click Me
</button>
)
}
export default App;The declaration of hover style in this example uses the nested CSS prop. When you hover over the button, the background and font colors in the code block will change.
Passing Object styles to the CSS Prop
The cssprop also accepts JavaScript object style. Using object styles when styling multiple components allows you to reuse the styles of your components.
To pass object style to the cssprop, define it as a JavaScript Object and pass it to prop:
const style = {
padding: '0.5rem 1rem',
border: 'none',
fontFamily: 'cursive',
borderRadius: '12px',
color: '#333333',
backgroundColor: 'inherit',
marginBlockStart: '2rem',
marginBlockEnd: '2rem',
'&:hover': {
color: '#e2e2e2',
backgroundColor: '#333333',
}
}
return (
<div className="app">
<button css={ style }>Click Me</button>
</div>
);The CSS property names have been camelCased, not hyphenated. The styles are JavaScript objects that use camelCase names.
Styled Components for Styling
Emotion uses styled components to style React applications. Styled components are similar to React components. You will need to use the -styled function in order to create styled components.
You can create styled components that are reusable by using the styled. Import the emotion/styled from the emotions/styled Library to use the Styled Function.
Install the @emotion/styled Library into your project. This can be done by typing the following command into your project’s terminal.
npm install @emotion/styled
Import the styled after installing the @emotion/styled libraries and define your styles.
import styled from "@emotion/styled";
const Button = styled.button({
padding: '0.5rem 1rem',
border: 'none',
fontFamily: 'cursive',
borderRadius: '12px',
color: '#333333',
backgroundColor: 'inherit',
marginBlockStart: '2rem',
marginBlockEnd: '2rem',
'&:hover': {
color: '#e2e2e2',
backgroundColor: '#333333',
}
})
export default Button;The code block creates a styled Button. This Button can be used in any React application just like any other React components.
As follows:
import React from 'react';
import Button from './Button';
function App() {
return (
<div>
<Button>Click Me</Button>
</div>
);
}
export default App;The Button will be displayed on your screen when you render the App.
String styles are also accepted by the styled. The object styles approach looks different but works similarly.
import styled from "@emotion/styled";
const Button = styled.button`
padding: 0.5rem 1rem;
border: none;
font-family: cursive;
border-radius: 12px;
color: #333333;
background-color: inherit;
margin-block-start: 2rem;
margin-block-end: 2rem;
&:hover {
color: #e2e2e2;
background-color: #333333;
}
`
export default Button;Styling with Emotion: A Practical Guide
Emotion is an efficient and powerful library that allows you to easily manage your styles. Emotion is a powerful library that can simplify the styling of your React application. It also makes it easier to maintain your code and scale.
If you want to be able to style React components in a way that is more flexible and efficient, then Emotion may be the solution for you.
