There are multiple ways to use CSS in React applications.
Here are some common methods and detailed explanations of how to implement them in React.
### Inline Styles
Using CSS styles directly in elements in React is achieved through inline styles.
Inline styles are CSS styles passed directly as an object to the element's style attribute. Each style property is written in camelCase notation, rather than traditional CSS property names.
Use directly inside the element:
## Example
import React from 'react';
import ReactDOM from 'react-dom/client';
const Header =()=>{
return(
Hello Style!
Add a little style!
);
You can also create an object with style information and reference it in the style attribute:
## Example
import React from 'react';
import ReactDOM from 'react-dom';
const MyComponent =()=>{
// Define inline style object
const containerStyle ={
padding:'20px',
backgroundColor:'#f0f0f0'
};
const titleStyle ={
fontSize:'24px',
color:'#333'
};
return(
Hello, world!
);
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();
In the example above, containerStyle and titleStyle are two inline style objects applied to the div and h1 elements respectively. Here are the key points:
* Use camelCase notation for CSS properties (e.g., `backgroundColor` instead of `background-color`).
* All style property values are passed as strings (except for numeric values which can be used directly, React will automatically add units).
Inline styles can also dynamically change based on component state:
## Example
import React,{ useState } from 'react';
import ReactDOM from 'react-dom';
const MyComponent =()=>{
const[isHighlighted, setIsHighlighted]= useState(false);
const containerStyle ={
padding:'20px',
backgroundColor: isHighlighted ?'#ffff99':'#f0f0f0'
};
const titleStyle ={
fontSize:'24px',
color:'#333'
};
return(
Hello, world!
);
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();
### Via Style Files
You can write CSS styles in a separate file, just save the file with a .css file extension, then import it into your application.
Create a style file named App.css and add the following CSS code:
## Example
body {
background-color:#282c34;
color:white;
padding:40px;
font-family: Sans-Serif;
text-align:center;
}
Import the style App.css in your application:
## Example
import React from 'react';
import ReactDOM from 'react-dom/client';
import'./App.css';
const Header =()=>{
return(
Hello Style!
Add a little style!.
);
### CSS Modules
Another way to add styles to your application is to use CSS Modules.
CSS Module is a locally scoped CSS file naming convention. Through this method, CSS class names and animation names are scoped locally by default.
CSS Modules are very convenient for components placed in separate files.
Create a CSS Module using the .module.css extension, for example: MyComponent.module.css.
## Example
/* MyComponent.module.css */
.container{
padding:20px;
background-color:#f0f0f0;
}
.title{
font-size:24px;
color:#333;
}
Import the stylesheet in your application:
## Example
import React from 'react';
import ReactDOM from 'react-dom';
import styles from './MyComponent.module.css';
const MyComponent =()=>{
return(
YouTip