如何為組件添加 CSS 的 class？ 傳遞一個字元串作為 className 屬性： render() { return <span className="menu navigation-menu">Menu</span> } CSS 的 class 依賴組件的 props 或 state 的情 ...
如何為組件添加 CSS 的 class？
傳遞一個字元串作為 className 屬性：
render() {
return <span className="menu navigation-menu">Menu</span>
}
CSS 的 class 依賴組件的 props 或 state 的情況很常見：
render() {
let className = 'menu';
if (this.props.isActive) {
className += ' menu-active';
}
return <span className={className}>Menu</span>
}
style(行內樣式 inline-style) 規範
註意：
在文檔中，部分例子為了方便，直接使用了 style，但是通常不推薦將 style 屬性作為設置元素樣式的主要方式。在多數情況下，應使用 className 屬性來引用外部 CSS 樣式表中定義的 class。style 在 React 應用中多用於在渲染過程中添加動態計算的樣式。
style 接受一個採用小駝峰命名屬性的 JavaScript 對象，而不是 CSS 字元串。這與 DOM 中 style 的 JavaScript 屬性是一致的，同時會更高效的，且能預防跨站腳本（XSS）的安全漏洞。例如：
const divStyle = {
color: 'blue',
backgroundImage: 'url(' + imgUrl + ')',
};
function HelloWorldComponent() {
return <div style={divStyle}>Hello World!</div>;
}
註意：樣式不會自動補齊首碼。如需支持舊版瀏覽器，請手動補充對應的樣式屬性：
const divStyle = {
WebkitTransition: 'all', // note the capital 'W' here
msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};
function ComponentWithTransition() {
return <div style={divStyle}>This should work cross-browser</div>;
}
Style 中的 key 採用小駝峰命名是為了與 JS 訪問 DOM 節點的屬性保持一致（例如：node.style.backgroundImage ）。瀏覽器引擎首碼都應以大寫字母開頭，除了 ms。因此，WebkitTransition 首字母為 ”W”。
React 會自動添加 ”px” 尾碼到內聯樣式為數字的屬性後。如需使用 ”px” 以外的單位，請將此值設為數字與所需單位組成的字元串。例如：
// Result style: '10px'
<div style={{ height: 10 }}>
Hello World!
</div>
// Result style: '10%'
<div style={{ height: '10%' }}>
Hello World!
</div>
但並非所有樣式屬性都轉換為像素字元串。有些樣式屬性是沒有單位的(例如 zoom，order，flex)。無單位屬性的完整列表在此處。
行內樣式不好嗎？
從性能角度來說，CSS 的 class 通常比行內樣式更好。
