In React, you have multiple options for how to style your components using CSS:
- CSS Classes and CSS files
- Inline Styles
- CSS Modules
- CSS in JS
In this section, we explore the first three as the latter depends on your selection of the CSS library you want to use, such as Emotion or Styled Components.
CSS Classes
Similar to vanilla javascript, you first need to define and include your CSS file in the project. Consider the following CSS file:
.header {
font-weight: bold;
color: salmon;
}
.header:hover {
color: blue;
}
.code {
font-family: monospace;
color: #333;
}
Consider the file name to be styles.css, you can include this file in the main index.html file:
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
But, more often with web frameworks such as Next.js you would import this file in your entry level file such as app.tsx:
import "./styles.css"
Using CSS files in your application creates global classes shared in your application. But how do we use this? In html we specify CSS classes using class such as . Would you know what the problem is with that in JSX?
Well, class is a reserved word in javascript, so we cannot use it. Therefore, we use className instead. For example:
function Greeting() {
return <h1 className="header">Hello</h1>
}
The issue with global class names is that it can create conflicts. Particularly if you use 3rd party libraries that introcuce their own classes and class names.
Inline Styles
Alternatively, you can use inline styles to specify the look of your elements. In HTML, you specify styles in the following way:
<h1 style="font-weight: bold;font-size: 1em">Hello</h1>
In React, for increased type safety and control, we use object notation of CSS classes specified inside the styles prop. The example above would look in React as following:
<h1 style={{ fontWeight: 'bold', fontSize: "1em" }}>Hello</h1>
So, style prop expects an object with values of CSS styles as react does not know how to parse style strings. You can easily create reusable inline styles similar to this:
const header = { fontWeight: 'bold', fontSize: "1em" }
<h1 style={header}>Header 1</h1>
<h1 style={header}>Header 2</h1>
The issue with inline styles is that they are limited in their use, as they cannot specify advanced behaviours such as mouse over events, or media queries for responsive styling.
CSS Modules
CSS Modules combine the convenience and expressivity of CSS classes with creation of isolated class names. To enable CSS modules, you have to use compaible bundler or framework, such as Next.js.
To create a CSS module you rename the styles.css to styles.module.css and import it in your component. You can then access individual class names using the .dot notation such as the following:
import styles from "./styles.module.css"
function Greeting() {
return <h1 className={styles.header}>Hello<h1>
}
Under the hood, the framework creates unique class names per each css module. For example, in browser, you would see something similar to this (note the name of the class):
<h1 className="App_header_JQ3e45">Hello</h1>
Consequently, you can use the same name of the CSS class across multiple CSS modules, without worry to create conflicts. In Skillpies editor we do not support CSS modules, only global CSS files and inline styles. But, some of our external exercises will use CSS modules, so be on the lookout!
SkillPies
