Styling React Components

React doesn't prescribe a specific way to style your components. You can use anything from traditional CSS to modern CSS-in-JS libraries.

1. Inline Styles

In React, inline styles are written as JavaScript objects. Property names are camelCased (e.g., `backgroundColor` instead of `background-color`).

JavaScript

function StyledBox() {
  const boxStyle = {
    color: 'white',
    backgroundColor: 'DodgerBlue',
    padding: '10px',
    fontFamily: 'Arial'
  };

  return <div style={boxStyle}>Hello React</div>;
}          

2. CSS Modules

CSS Modules allow you to write CSS that is scoped locally to a specific component, preventing naming conflicts. You name the file as `Filename.module.css`.

Button.module.css

.btn {
  background-color: green;
  color: white;
}          

JavaScript

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

function MyButton() {
  return <button className={styles.btn}>Click Me</button>;
}          

3. Global CSS

You can import a standard `.css` file directly into your component. These styles will be global and apply to any element matching the selector.

JavaScript

import './App.css';

function App() {
  return <div className="App">...</div>;
}          

Note: Use className instead of `class` in JSX, as `class` is a reserved keyword in JavaScript.