What are the Different Ways to Style a Reactjs Component?

Styling React components can be accomplished in several ways, each with its advantages and use cases. Here are the different methods:

1. CSS Stylesheets

Traditional CSS files can be used to style React components. Import the CSS file in your component file.

// styles.css
.button {
  background-color: blue;
  color: white;
}

// Component.js
import React from 'react';
import './styles.css';

const Component = () => {
  return <button className="button">Click Me</button>;
};

export default Component;

2. Inline Styles

Inline styles are applied directly to the element using the style attribute. This approach is ideal for dynamic styling.

import React from 'react';

const Component = () => {
  const buttonStyle = {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px'
  };

  return <button style={buttonStyle}>Click Me</button>;
};

export default Component;

3. CSS Modules

CSS Modules provide scoped and modular styling by default, preventing class name conflicts.

// styles.module.css
.button {
  background-color: blue;
  color: white;
}

// Component.js
import React from 'react';
import styles from './styles.module.css';

const Component = () => {
  return <button className={styles.button}>Click Me</button>;
};

export default Component;

4. Styled Components

Styled Components is a popular library for styling React components using tagged template literals. It allows for CSS-in-JS and offers dynamic styling capabilities.

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px;
`;

const Component = () => {
  return <Button>Click Me</Button>;
};

export default Component;

5. Emotion

Emotion is another CSS-in-JS library similar to Styled Components, providing powerful and flexible styling options.

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import React from 'react';

const buttonStyle = css`
  background-color: blue;
  color: white;
  padding: 10px;
`;

const Component = () => {
  return <button css={buttonStyle}>Click Me</button>;
};

export default Component;

6. Styled JSX

Styled JSX is a CSS-in-JS solution specifically for Next.js, but it can be used in other React projects as well.

import React from 'react';

const Component = () => {
  return (
    <>
      <button className="button">Click Me</button>
      <style jsx>{`
        .button {
          background-color: blue;
          color: white;
          padding: 10px;
        }
      `}</style>
    </>
  );
};

export default Component;

7. Tailwind CSS

Tailwind CSS is a utility-first CSS framework that can be used to style React components with utility classes.

import React from 'react';
import 'tailwindcss/tailwind.css';

const Component = () => {
  return <button className="bg-blue-500 text-white p-2">Click Me</button>;
};

export default Component;

8. SASS/SCSS

SASS/SCSS allows for more advanced CSS features like variables, nesting, and mixins. Import the SCSS file in your component file.

// styles.scss
$button-color: blue;

.button {
  background-color: $button-color;
  color: white;
}

// Component.js
import React from 'react';
import './styles.scss';

const Component = () => {
  return <button className="button">Click Me</button>;
};

export default Component;

9. BEM (Block Element Modifier)

The BEM methodology is a convention for naming CSS classes to keep the CSS modular and maintainable. This can be combined with CSS, SASS, or CSS Modules

// styles.scss
.button {
  &__text {
    color: white;
  }

  &--primary {
    background-color: blue;
  }
}

// Component.js
import React from 'react';
import './styles.scss';

const Component = () => {
  return <button className="button button--primary">
    <span className="button__text">Click Me</span>
  </button>;
};

export default Component;

Each of these methods has its own strengths and weaknesses, and the choice of method often depends on the specific requirements of the project, team preferences, and existing codebase conventions.