這篇文章是30天React系列的一部分 。

在本系列中，我們將從非常基礎開始，逐步瞭解您需要了解的所有內容，以便開始使用React。如果您曾經想學習React，那麼這裡就是您的最佳選擇！

下載免費的PDF

樣式

在Github上編輯此頁面

沒有風格，沒有應用是完整的。我們將看看我們可以用來設計元件樣式的不同方法，從傳統的CSS到內聯樣式。

通過這一點，除了將Cascading StyleSheet（CSS）類名稱附加到元件之外，我們還沒有觸及元件的樣式。

今天，我們將花時間通過幾種方式來設計我們的React元件的樣式，使它們看起來很棒，但仍然保持我們的理智。我們甚至可以通過使用CSS更容易一些工作！

讓我們看一下我們可以為元件設定樣式的幾種方法。

1. CasCasding樣式表（CSS）
2. 內聯樣式
3. 樣式庫

CSS

使用CSS來設定我們的Web應用程式的樣式是我們已經熟悉的一種做法，並不是什麼新鮮事。如果您之前曾經編寫過Web應用程式，那麼您很可能已經使用/編寫過CSS。簡而言之，CSS是我們在實際標記本身之外向DOM元件新增樣式的一種方式。

使用CSS和React並不新穎。我們將在React中使用CSS，就像我們在不使用React 時使用CSS一樣。我們將ids / classes分配給元件，並使用CSS選擇器來定位頁面上的這些元素，讓瀏覽器處理樣式。

作為一個例子，讓我們設計Header我們已經使用過的元件。

橙色標題

假設我們想使用CSS將標題顏色變為橙色。我們可以通過在頁面中新增樣式表並在CSS類中定位CSS類來輕鬆處理此問題.header。

回想一下，我們Header元件的渲染功能目前如下所示：

class Header extends React.Component {
  render() {
    // Classes to add to the <input /> element
    let searchInputClasses = ["searchInput"];

    // Update the class array if the state is visible
    if (this.state.searchVisible) {
      searchInputClasses.push("active");
    }

    return (
      <div className="header">
        <div className="fa fa-more"></div>

        <span className="title">
          {this.props.title}
        </span>

        <input
          type="text"
          className={searchInputClasses.join(' ')}
          placeholder="Search ..." />

        <div className="fa fa-search searchIcon"></div>
      </div>
    )
  }
}
 

我們可以header通過.header在常規css檔案中定義類的樣式來定位。像往常一樣，我們需要確保使用<link />標記在我們的HTML頁面中包含CSS類。假設我們在與檔案styles.css位於同一目錄中的index.html檔案中定義樣式，此<link />標記將如下所示：

<link rel="stylesheet" type="text/css" href="styles.css">

讓我們填寫Header類名的樣式：

.header {
  background: rgba(251, 202, 43, 1);
}
.header, .fa, .title, .searchIcon {
  color: #333333;
}

橙色標題

關於CSS的最常見的抱怨之一是級聯功能本身。CSS的工作方式是它將父級樣式級聯（因此名稱）為其子級。這通常是導致錯誤的原因，因為類通常具有通用名稱，並且很容易覆蓋非特定類的類樣式。

使用我們的示例，類名.header不是非常具體。頁面本身不僅具有標題，而且頁面上的內容框可能，文章，甚至我們放置在頁面上的廣告都可能具有類名.header。

我們可以避免這個問題的一種方法是使用類似css模組的東西來為我們定義自定義的，非常獨特的CSS類名。除了強制我們的構建工具為我們定義自定義CSS類名之外，CSS模組沒有任何神奇之處，因此我們可以使用不太獨特的名稱。我們將在稍後的工作流程中考慮使用CSS模組。

React提供了一種不那麼新的方法來完全避免這個問題，允許我們在JSX中內聯定義樣式。

內聯樣式

向我們的實際元件新增樣式不僅允許我們在元件內定義樣式，還允許我們根據應用程式的不同狀態動態定義樣式。

React為我們提供了一種使用JavaScript物件而不是單獨的CSS檔案來定義樣式的方法。讓我們Header再一次使用我們的元件，而不是使用css類來定義樣式，讓我們將它移動到內聯樣式。

使用styleprop 可以輕鬆定義元件內的樣式。React中的所有DOM元素都接受一個style屬性，該屬性應該是一個具有camel-cased鍵的物件，用於定義樣式名稱和對映到其值的值。

例如，要在JSX中color向<div />元素新增樣式，可能如下所示：

const style = { color: 'blue' }
<div style={style}>
  This text will have the color blue
</div>

此文字的顏色為藍色

請注意，我們使用圍繞它的兩個括號定義了樣式。當我們在模板標記中傳遞JavaScript物件時，內部大括號是JS物件，外部是模板標記。

可能使這個更清晰的另一個例子是傳遞在JSX之外定義的JavaScript物件，即

render() {
  const divStyle = { color: 'blue' }
  return (<div style={divStyle}>
    This text will have the color blue
  </div>);
}

在任何情況下，由於這些是JS定義的樣式，因此我們不能使用任何ole'css樣式名稱（因為background-color在JavaScript中無效）。相反，React要求我們使用樣式名稱。

camelCase正在使用大寫字母為每個帶有大寫字母的單詞寫複合詞，除了第一個單詞，比如backgroundColor和linearGradient。

要更新我們的標頭元件以使用這些樣式而不是依賴於CSS類定義，我們可以新增classNameprop和styleprop：

class Header extends React.Component {
  // ...
  render() {
    // Classes to add to the <input /> element
    let searchInputClasses = ["searchInput"];

    // Update the class array if the state is visible
    if (this.state.searchVisible) {
      searchInputClasses.push("active");
    }

    const wrapperStyle = {
      backgroundColor: 'rgba(251, 202, 43, 1)'
    }

    const titleStyle = {
      color: '#111111'
    }

    const menuColor = {
      backgroundColor: '#111111'
    }

    return (
      <div style={wrapperStyle} className="header">
        <div className="menuIcon">
          <div className="dashTop" style={menuColor}></div>
          <div className="dashBottom" style={menuColor}></div>
          <div className="circle" style={menuColor}></div>
        </div>

        <span style={titleStyle} className="title">
          {this.props.title}
        </span>

        <input
          type="text"
          className={searchInputClasses.join(' ')}
          placeholder="Search ..." />

        {/* Adding an onClick handler to call the showSearch button */}
        <div
          style={titleStyle}
          onClick={this.showSearch.bind(this)}
          className="fa fa-search searchIcon"></div>
      </div>
    )
  }
}

我們的標題將再次變為橙色。

橙色標題

樣式庫

React社群是一個非常有活力的地方（這是一個很棒的圖書館工作的原因之一）。我們可以使用很多樣式庫來幫助我們構建樣式，例如Formiumable實驗室的Radium。

這些庫中的大多數都是基於React開發人員通過使用React定義的工作流程。

Radium允許我們在React元件本身之外定義通用樣式，它自動供應商字首，支援媒體查詢（如:hover和:active），簡化內聯樣式，以及更多型別。

我們不會在這篇文章中深入研究Radium，因為它超出了本系列的範圍，但是瞭解其他庫是很好的，特別是如果你想擴充套件內聯樣式的定義。

既然我們知道如何設計我們的元件，我們可以製作一些好看的元件而不會有太多麻煩。在下一節中，我們將直接向元件新增使用者互動性。

學習REACT正確的方法

React和朋友的最新，深入，完整的指南。

下載第一章

❮上一個

下一章：

互動

下一個 ❯

本教程系列的完整原始碼可以在GitHub repo上找到，其中包括所有樣式和程式碼示例。

如果您在任何時候感到困難，還有其他問題，請隨時通過以下方式與我們聯絡：

• 在文章末尾評論這篇文章
• 通過[email protected]傳送電子郵件給我們
• 加入我們的gitter室
• 傳送電子郵件至@fullstackreact