Built-in CSS Support

React allows you to import CSS files from a JavaScript file.

For example, to add Global Stylesheet to boilerplate, we import following CSS file within src/App.tsx.

src/styles/global.css

hmtl,body {    margin: 0;    padding: 0;    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",        "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";}

Then, import the styles.css file.

src/App.tsx

import Home from "pages";import "styles/global.css";
function App(): JSX.Element {  return (    <div className="App">      <Home />    </div>  );}
export default App;

These styles will apply to all pages and components in your application.

CSS Modules

CSS Modules let you use the same CSS class name in different files without worrying about naming clashes.

To style your components using CSS Modules, name your stylesheet files with the [name].module.css.

For example, lets check out a reusable Header component implementation.

components/header/index.module.css

.header {  background-color: #20232A;  text-align: center;}

components/header

import React from "react";import styles from "./index.module.css";import { Logo } from "components";
export const Header: React.FC = () => {  return (    <div className={styles.header}>      <Logo />    </div>  );};

note

The class names which will be processed into a globally unique class name during build.