Styling in React

CSS Classes

You can import stylesheets directly into your component files use CSS classes by using the className attribute. The import is processed by an additional toolchain. Popular solutions are webpack or vite.

Additionally, you can also use <link rel="stylesheet" href="styles.css"> links. A production build transforms a JavaScript stylesheet import into a separate css file which is then loaded via the <link> tag as above. In development mode, the CSS is directly embedded into the JavaScript bundle. This way, it can benefit from hot reload. Hot reload enables to save css and see the changes directly in the browser without refreshing.

import './styles.css'

const MyComponent = ({title, children}) => (
  <div className="card">
    <h2>{title}</h2>
    {children}
  </div>
);

Using the style property

You can also apply styles directly to a component via the style property. The style property takes an object of styles. CSS properties follow the naming pattern of the CSS Object model, which uses camelCase:

const MyComponent = ({title, children}) => (
  <div style={{borderRadius: '.25rem', border: '1px solid #ccc', padding: '1rem'}}>
    <h2>{title}</h2>
    {children}
  </div>
);

Styled components

Another approach is to use a library called styled-components. This enables you to write CSS directly in JavaScript.

const Card = styled.div`
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: .25rem;
`

const MyCardComponent ({title, children}) => (
  <Card>
    <h2>{title}</h2>
    {children}
  </Card>)

An alternative implementation of styled-components is @emotion/styled. This is used in the context of the MUI component framework.

Tailwind

Another very popular approach is to use tailwind which is a set of CSS utility classes which are directly applied in the className attribute. The Tailwind CSS framework encourages the use of design tokens.

const MyCardComponent ({title, children}) => (
  <div className="border-solid border-2 border-sky-500 p-4">
    <h2>{title}</h2>
    {children}
  </div>
);