We’re all familiar with the standard way of linking up a stylesheet to the
<head> of an HTML doc, right? That’s just one of several ways we’re able to write CSS. But what does it look like to style things in a single-page application (SPA), say in a React project?
Turns out there are several ways to go about styling a React application. Some overlap with traditional styling, others not so much. But let’s count all the ways we can do it.
Importing external stylesheets
As the name suggests, React can import CSS files. The process is similar to how we link up CSS file in the HTML
- Create a new CSS file in your project directory.
- Write CSS.
- Import it into the React file.
That usually goes at the top of the file where other imports happen:
import React from "react"; import "./Components/css/App.css"; function App() return ( <div className="main"> </div> ); export default App;
In this example, a CSS file is imported into an
App.js from the
Write inline styles
You may be used to hearing that inline styling isn’t all that great for maintainability and whatnot, but there are definitely situations (here’s one!) where it makes sense. And maintainability is less of an issue in React, as the CSS often already sits inside the same file anyway.
This is a super simple example of inline styling in React:
<div className="main" style=color:"red">
A better approach, though, is to use objects:
- First, create an object that contains styles for different elements.
- Then add it to an element using the
styleattribute and then select the property to style.
Let’s see that in context:
import React from "react"; function App() const styles = main: backgroundColor: "#f1f1f1", width: "100%", , inputText: padding: "10px", color: "red", , ; return ( <div className="main" style=styles.main> <input type="text" style=styles.inputText></input> </div> ); export default App;
This example contains a
styles object containing two more objects, one for the
.main class and the other for a text input, which contain style rules similar to what we’d expect to see in an external stylesheet. Those objects are then applied to the
style attribute of elements that are in the returned markup.
Note that curly brackets are used when referencing styles rather than the quotation marks we’d normally use in plain HTML.
Use CSS Modules
CSS Modules… what the heck happened to those, right? They have the benefit of locally scoped variables and can be used right alongside React. But what are they, again, exactly?
Quoting the repo’s documentation:
CSS Modules works by compiling individual CSS files into both CSS and data. The CSS output is normal, global CSS, which can be injected directly into the browser or concatenated together and written to a file for production use. The data is used to map the human-readable names you’ve used in the files to the globally-safe output CSS.
In simpler terms, CSS Modules allows us to use the same class name in multiple files without clashes since each class name is given a unique programmatic name. This is especially useful in larger applications. Every class name is scoped locally to the specific component in which it is being imported.
A CSS Module stylesheet is similar to a regular stylesheet, only with a different extension (e.g.
styles.module.css). Here’s how they’re set up:
- Create a file with
.module.cssas the extension.
- Import that module into the React app (like we saw earlier)
- Add a
classNameto an element or component and reference the particular style from the imported styles.
Super simple example:
/* styles.module.css */ .font color: #f00; font-size: 20px; import React from "react"; import styles from "./styles.module.css"; function App() return ( <h1 className=styles.heading>Hello World</h1> ); export default App;
Install the styled-components npm package in the command line:
npm install styled-components
Next up, import it into the React app:
import styled from 'styled-components'
Create a component and assign a styled property to it. Note the use of template literals denoted by backticks in the
import React from "react"; import styled from "styled-components"; function App() const Wrapper = styled.div` width: 100%; height: 100px; background-color: red; display: block; `; return <Wrapper />; export default App;
Wrapper component will be rendered as a div that contains those styles.
One of the advantages of styled-components is that the components themselves are functional, as in you can use props within the CSS. This opens the door up to conditional statements and changing styles based on a state or prop.
Here’s a demo showing that off:
Here, we are manipulating the div’s
display property on the display state. This state is controlled by a button that toggles the div’s state when clicked. This, in turn, toggles between the styles of two different states.
if statements, we use a
? instead of the usual
else syntax. The
else part is after the semicolon. And remember to always call or use the state after it has been initialized. In that last demo, for example, the state should be above the
Wrapper component’s styles.
Happy React styling!
That’s a wrap, folks! We looked at a handful of different ways to write styles in a React application. And it’s not like one is any better than the rest; the approach you use depends on the situation, of course. Hopefully now you’ve got a good understanding of them and know that you have a bunch of tools in your React styling arsenal.