React CSS Styling

There are several ways to apply CSS styles to React components. Here are a few common approaches:

Inline CSS Styling

You can use the style prop to apply inline styles to a React component. This is useful for simple styles that don't need to be reused elsewhere in your application. Here's an example:

import React from 'react';

const MyComponent = () => {
  return <div style={{color: 'red', fontSize: '20px'}}>Hello, World!</div>;
};

export default MyComponent;

CSS Classes

You can create a CSS class and apply it to a React component using the className prop. This is useful for styles that you want to reuse in multiple places in your application. Here's an example:

import React from 'react';

import './MyComponent.css';

const MyComponent = () => {
  return <div className="red-text">Hello, World!</div>;
};

export default MyComponent;

CSS Modules

You can use CSS modules to apply styles to React components. CSS modules allow you to write CSS in a way that's scoped to a specific component, which can help avoid conflicts with other styles in your application. Here's an example:
 

import React from 'react';

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

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

export default MyComponent;

These are just a few of the ways you can apply styles to React components. There are many other approaches and tools available, such as styled components and emotion, which can also be used to style React components.

Rakib Alom

About author

I am a professional web developer. I love programming and coding, and reading books. I am the founder and CEO of StorialTech.