You might have come across different ways to style React components.
In this article, we will discuss the most popular ways to do it and the advantages and disadvantages of using them.
Inline Styling
If you want to add a style quickly, you can make use of the style prop to pass the styles to the element as shown below:
import React from "react"
const InlineStyle = () => {
return (
<div>
<button
style={{
backgroundColor: "#0ea5e9",
border: "none",
color: "white",
borderRadius: "0.5rem",
padding: "0.5rem 1rem",
cursor: "pointer",
}}
>
Hover Me
</button>
<p
style={{
color: "green",
background: "lightGreen",
padding: "0.5rem 1rem",
}}
>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea ab
exercitationem soluta, consequatur obcaecati suscipit numquam dolorem,
dignissimos quas nobis error repellat minus sed accusamus placeat, rerum
illum magnam aspernatur?
</p>
</div>
)
}
export default InlineStyle
As you could see, we have to pass the styles in a JavaScript object to the style prop.
You can see a demo of using inline styles here.
Advantages
- With inline styles, we do not want to create a separate css file and switch between the css and the component file while applying styles.
Disadvantages
As you may have seen in the demo, nothing happens when you hover over the button.
This is because, with inline styles, you will not be able to add pseudo selectors like:hover,:focusetc.This requires you to write css in the js format, which many people who are used to writing css in a traditional way may not like.
We cannot reuse the styles, or use any selectors, which makes the code lengthy and unmaintainable.
In-Page Styles
In Page styles are nothing but inline styles extracted to a separate JavaScript object:
import React from "react"
const InPageStyle = () => {
return (
<div>
<button style={styles.button}>Hover Me</button>
<p style={styles.paragraph}>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea ab
exercitationem soluta, consequatur obcaecati suscipit numquam dolorem,
dignissimos quas nobis error repellat minus sed accusamus placeat, rerum
illum magnam aspernatur?
</p>
</div>
)
}
const styles = {
button: {
backgroundColor: "#0ea5e9",
border: "none",
color: "white",
borderRadius: "0.5rem",
padding: "0.5rem 1rem",
cursor: "pointer",
},
paragraph: {
color: "green",
background: "lightGreen",
padding: "0.5rem 1rem",
},
}
export default InPageStyle
The advantage of using styles this way is you can reuse the styles within the component.
If you place it in a common file and export the styles, then you can use it throughout the application.
Global styles
Global styles are the traditional way of having a css file containing all the styles related to the entire application.
To make use of global styles, create a css file called global.css as shown below:
.button {
background-color: #0ea5e9;
border: none;
color: white;
border-radius: 0.5rem;
padding: 0.5rem 1rem;
cursor: pointer;
}
.button:hover {
background-color: rgb(37, 99, 235);
}
.paragraph {
color: green;
background: lightGreen;
padding: 0.5rem 1rem;
}
Now include the global.css in the topmost component in your project:
import React from "react"
import "./global.css"
const GlobalStyle = () => {
return (
<div>
<button className="button">Hover Me</button>
<p className="paragraph">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea ab
exercitationem soluta, consequatur obcaecati suscipit numquam dolorem,
dignissimos quas nobis error repellat minus sed accusamus placeat, rerum
illum magnam aspernatur?
</p>
<button className="button">Hover Me</button>
</div>
)
}
export default GlobalStyle
Advantages
- Unlike inline styles, we can have different types of selectors to share the styling between components.
- Since style is separated into a different file, it helps in having a cleaner code.
Disadvantages
- Since all the styles are stored in a single css file, if multiple people are working on the project, then it might result in both code conflict and styling conflicts.
Create react app comes with default
index.css, which is an example of global css styling.
You can see a demo of the global css here.
CSS Modules
CSS Modules is a way to have separate css styles for each module.
Let's separate the buttons and paragraphs into different components.
import React from "react"
import styles from "./ButtonOne.module.css" // Import css modules stylesheet as styles
const ButtonOne = () => {
return (
<div>
<button className={styles.button}>Hover Me</button>
</div>
)
}
export default ButtonOne
import React from "react"
import styles from "./ButtonTwo.module.css" // Import css modules stylesheet as styles
const ButtonTwo = () => {
return (
<div>
<button className={styles.button}>Hover Me</button>
</div>
)
}
export default ButtonTwo
import React from "react"
import styles from "./Paragraph.module.css" // Import css modules stylesheet as styles
const Paragraph = () => {
return (
<div>
<p className={styles.paragraph}>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea ab
exercitationem soluta, consequatur obcaecati suscipit numquam dolorem,
dignissimos quas nobis error repellat minus sed accusamus placeat, rerum
illum magnam aspernatur?
</p>
</div>
)
}
export default Paragraph
Now let's add the styles for all the 3 components:
.button {
background-color: #0ea5e9;
border: none;
color: white;
border-radius: 0.5rem;
padding: 0.5rem 1rem;
cursor: pointer;
}
.button:hover {
background-color: rgb(37, 99, 235);
}
.button {
background-color: rgb(239, 68, 68);
border: none;
color: white;
border-radius: 0.5rem;
padding: 0.5rem 1rem;
cursor: pointer;
}
.button:hover {
background-color: rgb(185, 28, 28);
}
.paragraph {
color: green;
background: lightGreen;
padding: 0.5rem 1rem;
}
Finally, let's include all the components in our app:
import React from "react"
import ButtonOne from "./ButtonOne"
import ButtonTwo from "./ButtonTwo"
import Paragraph from "./Paragraph"
const CssModules = () => {
return (
<div>
<ButtonOne />
<Paragraph />
<ButtonTwo />
</div>
)
}
export default CssModules
If you inspect the demo page and see, you will observe that the classes are named in the format <ComponentName>_<ClassName>_<RandomString>.
This is done to avoid any conflicts between the css modules.
Advantages
- Since each module has a separate css file, multiple developers can work in parallel without css or merge conflicts.
Disadvantages
- There can be code duplication if the same style is used across the modules (which can be solved by pushing the common styles to a global stylesheet).
So far we have seen methods supported in react by default. Now we will see some third-party libraries, which help in styling the app.
Styled Components
Styled Components helps in defining the styles of a component by passing the actual css using template literals (back ticks), as shown below:
const Button = styled.button`
border-radius: 3px;
padding: 0.5rem 0;
margin: 0.5rem 1rem;
width: 11rem;
background: transparent;
color: white;
border: 2px solid white;
`
Now we just need to include the Button component wherever it is needed.
To make use of styled components, we need to install it first (you may use npm i styled-components if you prefer to.):
yarn add styled-components
Consider the following code:
import React from "react"
import styled, { css } from "styled-components"
const Button = styled.button`
background: transparent;
border-radius: 3px;
border: 2px solid palevioletred;
color: palevioletred;
margin: 0.5em 1em;
padding: 0.25em 1em;
cursor: pointer;
${props =>
props.primary &&
css`
background: palevioletred;
color: white;
`}
`
const Paragraph = styled.p`
color: green;
background: lightGreen;
padding: 0.5rem 1rem;
`
const StyledComponents = () => {
return (
<div>
<Button>Normal Button</Button>
<Paragraph>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea ab
exercitationem soluta, consequatur obcaecati suscipit numquam dolorem,
dignissimos quas nobis error repellat minus sed accusamus placeat, rerum
illum magnam aspernatur?
</Paragraph>
<Button primary>Primary Button</Button>
</div>
)
}
export default StyledComponents
Styled Component can receive props and then apply different styles if that prop matches some condition.
Like in our case, we are changing the color and the background of the button, if the prop primary is set to true.
A demo of the above code can be found here.
We can also extend an existing style as shown below:
const Button = styled.button`
border-radius: 3px;
padding: 0.5rem 0;
margin: 0.5rem 1rem;
width: 11rem;
background: transparent;
color: white;
border: 2px solid white;
`
const EnhancedButton = styled(Button)`
:hover {
color: red;
}
`
The EnhancedButton will get all the styles from the Button component and the styles defined by itself.
Emotion
Emotion is alternative to styled-components.
We can install emotion in React by running the following command:
yarn add @emotion/react
Now we can use emotion in our app:
/** @jsxRuntime classic */
// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement
/** @jsx jsx */
import { css, jsx } from "@emotion/react"
const color = "white"
const Emotion = () => {
return (
<div>
<button
css={css`
margin: 0.5em 1em;
padding: 0.25em 1em;
cursor: pointer;
background-color: hotpink;
font-size: 24px;
border-radius: 4px;
border: none;
&:hover {
color: ${color};
}
`}
>
Hover Me
</button>
<p
css={css`
color: green;
background: lightGreen;
padding: 0.5rem 1rem;
`}
>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea ab
exercitationem soluta, consequatur obcaecati suscipit numquam dolorem,
dignissimos quas nobis error repellat minus sed accusamus placeat, rerum
illum magnam aspernatur?
</p>
</div>
)
}
export default Emotion
If you see, it is a bit similar to styled components, which uses the backtick syntax.
In fact, there is a package called @emotion/styled,
which helps in writing css in styled-component way!
The demo for the above code can be found here.
SASS support
If you wish to use SCSS in your app, then you can do so by installing node-sass:
yarn add node-sass@4.14.1
Now create file named styles.scss with the following content:
$myColor: purple;
h2 {
color: $myColor;
}
Then use it in the component by importing it:
import React from "react"
import "./styles.scss"
const Sass = () => {
return (
<div>
<h2>Styling using SASS</h2>
</div>
)
}
export default Sass
Other libraries
There are other libraries as well like tailwind, and component libraries like Semantic UI, React Bootstrap, Ant Design, Chakra UI, BluePrint, Material UI, etc., which you can try out.
Source code and Demo
You can view the complete source code here and a demo here.
Top comments (0)