React開發經常使用設計模式-組件樣式

React 是視圖層。所以，它能夠控制在瀏覽器中渲染的標記。衆所周知，頁面上的 HTML 標記與 CSS 的樣式是緊密聯繫在一塊兒的。有幾種方式來處理 React 應用的樣式，接下來介紹這些最流行的方式。

組件樣式

經典 CSS 類

JSX 語法至關接近於 HTML 語法。所以，擁有與 HTML 幾乎相同的標籤屬性，仍然可使用 CSS 類來處理樣式。類是定義在外部的 .css文件中的。惟一須要注意的是 React 中使用的是 className，而不是 class 。例如:

1 <h1> className='title'>Styling</h1>

內聯樣式

內聯樣式也能很好的工做。相似於 HTML ，能夠經過 style 屬性來直接傳入樣式。可是，style 屬性在 HTML 中是字符串，而在 JSX 中必須得是一個對象。

1 const inlineStyles = {
2   color: 'red',
3   fontSize: '10px',
4   marginTop: '2em',
5   'border-top': 'solid 1px #000'
6 };
7 
8 <h2 style={ inlineStyles }>Inline styling</h2>

由於用 JavaScript 編寫樣式，因此從語法角度來看，是有一些限制的。若是想要使用原始的 CSS 屬性名稱，那麼須要用引號包裹起來，不然須要遵循駝峯式命名規則。可是，使用 JavaScript 編寫樣式卻很是有趣，它比普通的 CSS 更具靈活性。例如樣式的繼承:

1 const theme = {
2   fontFamily: 'Georgia',
3   color: 'blue'
4 };
5 const paragraphText = {
6   ...theme,
7   fontSize: '20px'
8 };

theme中有一些基礎樣式，而後在 paragraphText 中混入 theme 的樣式。簡而言之，可以使用 JavaScript 的所有能力來組織 CSS 。重要的是最終生成了一個傳給 style 屬性的對象。

CSS 模塊

CSS 模塊 是創建在到目前爲止所介紹過的內容之上的。若是你不喜歡 JavaScript 用法來寫 CSS ，那麼可使用 CSS 模塊，它可讓繼續編寫普通的 CSS 。一般，這個庫是在打包階段發揮做用的。能夠將它做爲編譯步驟的一部分進行鏈接，但一般做爲構建系統插件分發。

下面的示例可讓你快速對其運行原理有個大體的瞭解:

 1 /* style.css */
 2 .title {
 3   color: green;
 4 }
 5 
 6 // App.jsx
 7 import styles from "./style.css";
 8 
 9 function App() {
10   return <h1 style={ styles.title }>Hello world</h1>;
11 }

默認狀況下是沒法這樣使用的，只有使用了 CSS 模塊，才能直接導入普通的 CSS 文件並使用其中的類。

當提到 普通的 CSS ，並不是真的指最原始的 CSS 。它支持一些很是有用的組合技巧。例如:

1 .title {
2   composes: mainColor from "./brand-colors.css";
3 }

Styled-components

Styled-components 則是另外一種徹底不一樣的方向。此庫再也不爲 React 組件提供內聯樣式。須要使用組件來表示它的外觀感覺。例如，建立了 Link組件，它具備特定的風格和用法，而再使用 <a>標籤。

1 const Link = styled.a`
2   text-decoration: none;
3   padding: 4px;
4   border: solid 1px #999;
5   color: black;
6 `;
7 
8 <Link href='http://google.com'>Google</Link>

還有一種擴展類的機制。還可使用 Link 組件，可是會改變它的文字顏色，像這樣:

1 const AnotherLink = styled(Link)`
2   color: blue;
3 `;
4 
5 <AnotherLink href='http://facebook.com'>Facebook</AnotherLink>

到目前爲止 styled-components 多是多種處理 React 樣式的方法中我最感興趣的。用它來建立組件很是簡單，並能夠忘記樣式自己的存在。若是你的公司有能力建立一個設計系統並用它構建產品的話，那麼這個選項多是最合適的。

結語

處理 React 應用的樣式有多種方式。在生產環境中試驗過全部方式，能夠說無所謂對與錯。正如 JavaScript 中大多數技術同樣，你須要挑選一個更適合你的方式。