[TOC] # 為組件添加 class CSS 的 class 依賴組件的 props 或 state 的情況很常見 ```js render() { let className = 'menu'; if (this.props.isActive) { className += ' menu-active'; } return <span className={className}>Menu</span> } ``` 如果經常寫上面的代碼，也可以使用 [classnames](https://www.npmjs.com/package/classnames#usage-with-reactjs) 來簡化我們的書寫 # 固定樣式和動態樣式混合寫法 情況 1：只寫動態 class ```js <div className={index===this.state.currentIndex?"active":null}>此標簽是否選</div> ``` 情況 2：既有本身 class 又要寫動態 class ```js <div className={["container tab", index===this.state.currentIndex?"active":null].join(' ')}>此標簽是否選中</div> ``` ES6 寫法 ```js <div className={`container tab ${index === this.state.currentIndex ? "active" : null}`}>此標簽是否選中</div> ``` # 行內樣式 style 接受一個采用小駝峰命名屬性的 JavaScript 對象，而不是 CSS 字符串。這與 DOM 中 style 的 JavaScript 屬性是一致的，同時會更高效的，且能預防跨站腳本（XSS）的安全漏洞。例如： ```js const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', }; function HelloWorldComponent() { return <div style={divStyle}>Hello World!</div>; } ``` React 會自動添加 ”px” 后綴到內聯樣式為數字的屬性后。如需使用 ”px” 以外的單位，請將此值設為數字與所需單位組成的字符串。例如： ```html // Result style: '10px' <div style={{ height: 10 }}> Hello World! </div> // Result style: '10%' <div style={{ height: '10%' }}> Hello World! </div> ``` # styled-component [官方文檔](https://www.styled-components.com/docs/basics) <span style="font-family: 黑體;font-size: 18px;font-weight: 500;">Installation</span> `npm install --save styled-components` <span style="font-family: 黑體;font-size: 18px;font-weight: 500;">Getting Started</span> ``` // Create a Title component that'll render an <h1> tag with some styles const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; // Create a Wrapper component that'll render a <section> tag with some styles const Wrapper = styled.section` padding: 4em; background: papayawhip; `; // Use Title and Wrapper like any other React component – except they're styled! render( <Wrapper> <Title> Hello World! </Title> </Wrapper> ); ```