Skip to main content

Styling a React app

Styling a React app can be done using various methods, including:

Inline styling​

You can use the style attribute to apply styles directly to a component. This method is useful for small, one-off styles.

<div style={{color: 'blue', fontSize: '20px'}}>Hello World!</div>

CSS classes​

You can create a CSS file and import it into your React component. Then, you can apply CSS classes to your components using the className attribute.

styles.css
.greeting {
    color: 'blue'; 
    fontSize: '20px';
}
import './styles.css';

function App() {
  return <div className="greeting">Hello World!</div>;
}

CSS modules​

You can use CSS modules to create scoped CSS classes that are only applied to a specific component. This method helps to prevent naming conflicts between different components.

styles.module.css
.greeting {
    color: 'blue'; 
    fontSize: '20px';
}
import styles from './styles.module.css';

function App() {
  return <div className={styles.greeting}>Hello World!</div>;
}

Styled-components​

Styled-components is a popular library that allows you to write CSS styles directly in your JavaScript code. It creates unique CSS classes for each component, and it also allows you to pass props to your styles. After you install it, you can use it thus:

import styled from 'styled-components';

const Greeting = styled.div`
  color: blue;
  font-size: 20px;
`;

function App() {
  return <Greeting>Hello World!</Greeting>;
}