在 React 中設置 CSS 樣式主要有以下幾種方式，各有適用場景：
1. 內聯樣式 (Inline Styles)
直接在 JSX 元素中使用 style 屬性，值為 JavaScript 對象（使用駝峰命名法）
function Component() {return (<div style={{ color: 'red', backgroundColor: 'lightblue',padding: '10px',borderRadius: '5px' // 注意駝峰命名}}>內聯樣式示例</div>);
}
2. 外部樣式表 (External CSS)
創建獨立的 .css 文件，通過 import 引入
/* styles.css */
.container {padding: 20px;border: 1px solid #ccc;margin: 10px;
}
import './styles.css'; // 引入樣式文件function Component() {return <div className="container">外部樣式表示例</div>;
}
3. CSS Modules (推薦)
使用 [name].module.css 命名約定，實現局部作用域
/* Component.module.css */
.error { color: red;font-weight: bold;
}
import styles from './Component.module.css'; // 自動生成唯一類名function Component() {return <div className={styles.error}>CSS Modules 示例</div>;
}
4. CSS-in-JS 庫 (如 styled-components)
通過 JavaScript 直接編寫 CSS
npm install styled-components # 先安裝
import styled from 'styled-components';// 創建帶樣式的組件
const StyledButton = styled.button`background: ${props => props.primary ? 'blue' : 'white'};color: ${props => props.primary ? 'white' : 'blue'};padding: 10px 20px;border-radius: 4px;
`;function Component() {return (<><StyledButton>普通按鈕</StyledButton><StyledButton primary>主按鈕</StyledButton></>);
}
5. 動態樣式 (根據狀態變化)
結合狀態管理和樣式設置
function DynamicComponent() {const [isActive, setIsActive] = useState(false);// 動態類名const buttonClasses = `btn ${isActive ? 'btn-active' : ''}`;// 動態內聯樣式const divStyle = {transform: isActive ? 'scale(1.1)' : 'none',transition: 'transform 0.3s'};return (<div><div style={divStyle}>動態縮放元素</div><button className={buttonClasses}onClick={() => setIsActive(!isActive)}>{isActive ? '激活中' : '未激活'}</button></div>);
}
最佳實踐建議：
- 組件級樣式 → 首選 CSS Modules 或 CSS-in-JS
- 全局主題/基礎樣式 → 使用外部樣式表
- 簡單動態樣式 → 內聯樣式或動態類名
- 復雜交互/主題 → CSS-in-JS 解決方案
常見問題解決：
類名沖突 → 使用 CSS Modules 自動生成唯一類名
偽類/媒體查詢 → 避免用內聯樣式（使用 CSS/CSS-in-JS）
全局樣式污染 → 為根元素添加命名空間
動態主題切換 → 考慮使用 CSS 變量或 ThemeProvider (CSS-in-JS)
根據項目規模和團隊偏好選擇合適的方式，中小型項目推薦 CSS Modules + 少量內聯樣式，大型項目可考慮 CSS-in-JS 方案。
)
