1. 外部css文件 - 普通引入

1.1 創建一個 CSS 文件，MyComponent.css。

/* MyComponent.css */
.my-class {color: red;font-size: 20px;
}

?1.2 組件中import引入

import React from 'react';
import './MyComponent.css'; // 引入 CSS 文件function MyComponent() {return (<div className="my-class">This is a div with a class name.</div>);
}export default MyComponent;

1.3 動態className

import React, { useState } from 'react';function MyComponent() {const [isActive, setIsActive] = useState(false);return (<div className={isActive ? 'active' : 'inactive'}onClick={() => setIsActive(!isActive)}>Click me to toggle class.</div>);
}export default MyComponent;

2. 外部css文件 - CSS Modules引入

CSS Modules 是一種用于在 JavaScript 生態系統中使用 CSS 的方法，它通過模塊化的方式避免 CSS 類名沖突。

2.1 創建一個 CSS Module 文件，MyComponent.module.css。

/* MyComponent.module.css */
.myClass {color: red;font-size: 20px;
}

?2.2 在組件中引入并使用 CSS Module

import React from 'react';
import styles from './MyComponent.module.css'; // 引入 CSS Module 文件function MyComponent() {return (<div className={styles.myClass}>This is a div with a CSS Module class name.</div>);
}export default MyComponent;

react-10樣式模塊化（./index.module.css， ＜div className={welcome.title}＞Welcome＜/div＞）-CSDN博客文章瀏覽閱讀470次。React樣式模塊化（./index.module.css， Welcome）https://blog.csdn.net/2301_76671906/article/details/147627482?fromshare=blogdetail&sharetype=blogdetail&sharerId=147627482&sharerefer=PC&sharesource=2301_76671906&sharefrom=from_link

3. style內聯樣式引入

3.1?style內聯樣式

import React from 'react';function MyComponent() {return (<div style={{ color: 'blue', fontSize: '20px' }}>This is a div with inline style.</div>);
}export default MyComponent;

3.2 動態style

鼠標移入移出背景顏色的變化

 state = {isHover: false}// 鼠標移入移出判斷handleMouse = (isEnter) => {return () => {this.setState({ isHover: isEnter })}}render() {return (<div>{/* 判斷鼠標移入移出 */}<li style={{ backgroundColor: this.state.isHover? '#f5f5f5' : '#fff' }}     onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)} ></div>)}