在 React 組件樣板（JSX）中，可以透過 `style` 屬性設定行內 CSS。它與 HTML 的行內樣式略有不同： - `style` 接收的是 **JavaScript 物件**，不是 CSS 字串。 - CSS 屬性名稱使用 **camelCase**，例如： - `background-color` → `backgroundColor` - `font-size` → `fontSize` - 需要 JavaScript 表達式時使用 `{}`；因此常見寫法是 `style={{ ... }}`。 - 數值通常會自動視為 `px`，例如 `padding: 16` 等同於 `padding: '16px'`。 - 不需要互動功能，也可以直接使用固定的行內樣式。 ## 範例一：資訊卡片 ```jsx function ProfileCard() { const cardStyle = { width: 280, padding: 20, border: '1px solid #ddd', borderRadius: 12, backgroundColor: '#ffffff', boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)', }; const titleStyle = { margin: '0 0 8px', color: '#1f2937', fontSize: 22, }; const textStyle = { margin: 0, color: '#6b7280', lineHeight: 1.6, }; return ( <div style={cardStyle}> <h2 style={titleStyle}>王小明</h2> <p style={textStyle}>前端開發者，喜歡使用 React 建立網頁應用程式。</p> </div> ); } export default ProfileCard; ``` ## 範例二：提示訊息 ```jsx function SuccessMessage() { return ( <div style={{ maxWidth: 420, padding: '12px 16px', border: '1px solid #86efac', borderRadius: 8, backgroundColor: '#f0fdf4', color: '#166534', fontSize: 16, fontWeight: 'bold', textAlign: 'center', }} > 操作已成功完成！ </div> ); } export default SuccessMessage; ``` 重點是 `style` 的值必須是物件，例如： ```jsx <div style={{ color: 'red', fontSize: 18 }}> 這是一段紅色文字 </div> ``` 其中，外層 `{}` 表示 JSX 表達式，內層 `{}` 則是 JavaScript 樣式物件。