Different Ways To Styling React Component

By Atul Rai | Last Updated: February 9, 2024 Previous

There are several ways to style React components, each with its own advantages and use cases. Here are some common methods:

1. Inline Styles

You can apply styles directly to JSX elements using the style attribute. Inline styles are defined as JavaScript objects with camelCased CSS property names.

const MyComponent = () => {
  const styles = {
    color: 'blue',
    fontSize: '16px'
  };

  return <div style={styles}>Hello World</div>;
};

Inline styles are scoped to the component and are often useful for dynamic styles.

2. CSS Stylesheets

You can use traditional CSS files to style your React components. Import the CSS file into your component file and apply classes to JSX elements.

import './styles.css';

const MyComponent = () => {
  return <div className="my-class">Hello World</div>;
};

3. CSS Modules

CSS Modules allow you to write CSS styles in separate files and scope them to individual components. When importing a CSS file, styles are transformed into unique class names scoped to the component.

import styles from './styles.module.css';

const MyComponent = () => {
  return <div className={styles.myClass}>Hello World</div>;
};

CSS Modules help prevent style conflicts and make it easier to manage styles in larger applications.

4. Styled Components

Styled Components is a library that allows you to write CSS directly in your JavaScript files using tagged template literals. This approach keeps styles and components tightly coupled and makes it easy to create dynamic styles.

import styled from 'styled-components';

const StyledDiv = styled.div`
  color: blue;
  font-size: 16px;
`;

const MyComponent = () => {
  return <StyledDiv>Hello World</StyledDiv>;
};

5. CSS-in-JS Libraries

There are several CSS-in-JS libraries like Emotion, JSS, and Aphrodite that offer different approaches to styling in JavaScript. These libraries provide tools for writing dynamic and scoped styles directly in your component files.

import { css } from '@emotion/react';

const styles = css`
  color: blue;
  font-size: 16px;
`;

const MyComponent = () => {
  return <div css={styles}>Hello World</div>;
};

Each styling method has its own benefits and drawbacks, and the choice often depends on the project requirements, team preferences, and scalability considerations.

References

1. Styling and CSS