【全棧React】第9天: 樣式

本文轉載自：衆成翻譯
譯者：iOSDevLog
連接：http://www.zcfy.cc/article/3820
原文：https://www.fullstackreact.com/30-days-of-react/day-9/

沒有樣式的應用是不完整。咱們將看看咱們可使用不一樣的方法來調整組件，從傳統的CSS到內聯樣式。

經過這一點，除了將CSS類名附加到組件以外，咱們尚未觸及咱們組件的樣式。 今天，咱們將花點時間去了解咱們的React組件的樣式，使它們看起來很棒，但仍然保持完整。

咱們來看幾種不一樣的方式來組合一個組件。

1. 級聯樣式表(CSS)
2. 內聯樣式
3. 樣式庫

級聯樣式表(CSS)

使用CSS來構造咱們的Web應用程序是咱們已經熟悉的一個實踐，並非什麼新鮮事。 若是你之前曾經寫過Web應用程序，那麼你最有可能使用/編寫了CSS。 簡而言之，CSS是咱們爲實際標記以外的DOM組件添加樣式的一種方式。

使用CSS與React不同。 咱們將在React中使用CSS，就像咱們在_not_使用React時使用CSS同樣。 咱們將爲組件賦值ids / classes，並使用CSS選擇器來定位頁面上的元素，讓瀏覽器處理樣式。

例如，咱們來設計一下咱們一直在使用的Header 組件。

假設咱們想使用CSS將標題顏色變成橙色。 咱們能夠經過在咱們的頁面中添加一個樣式表，並在CSS類中定位.header 的CSS類來輕鬆處理。

回想一下，咱們的 Header 組件的render函數目前看起來像這樣：

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>
    )
  }
}

咱們能夠經過在普通的css文件中定義一個.header類的樣式來定位header 。 按照慣例，咱們須要確保咱們在HTML頁面中使用<link />tag來包含CSS類。 假設咱們將樣式定義在與index.html文件相同的目錄中的styles.css文件中，該<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的工做方式是將_cascades_（所以命名）父樣式做爲子樣式的樣式。這一般是錯誤的緣由，由於類一般具備通用名稱，而且易於覆蓋非特定類的類樣式。

咱們使用的例子中.header的類名不是很特別。頁面自己不只能夠有一個標題，並且頁面上的內容框多是文章，甚至咱們放置在頁面上的廣告均可能有一個.header類名稱。

咱們能夠避免這個問題的一個方法是使用像css modules這樣的東西，爲咱們定義自定義的很是獨特的CSS類名。
除了CSS模塊以外，CSS模塊尚未什麼神奇之處，它強制咱們的構建工具爲咱們定義了自定義的CSS類名，因此咱們可使用不太獨特的名稱。
咱們稍後將在工做流程中研究使用CSS模塊。

React提供了一種不太新的方法，經過容許咱們與JSX一塊兒定義樣式，從而徹底避免了這個問題。

內聯樣式

向實際組件添加樣式不只容許咱們定義組件中的樣式，還能夠根據應用的不一樣狀態動態定義樣式。

React爲咱們提供了一種使用JavaScript對象而不是單獨的CSS文件來定義樣式的方法。 讓咱們再次使用Header 組件，而不是使用css類來定義樣式，讓咱們將它移動到內聯樣式。

使用style 屬性能夠輕鬆地定義組件中的樣式。 React內的全部DOM元素都接受一個style屬性，該屬性預計是一個具備駱駝命名的對象，定義了一個樣式名稱和值映射到它們的值。

例如，要在JSX中的元素中添加一個color樣式，這多是：

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定義的樣式，因此咱們不能使用任何傳統的css樣式名稱（由於background-color 在JavaScript中將無效）。 反之，咱們的樣式名稱須要使用駝峯命名方式。

駝峯式大小寫 除了第一個詞首字母小寫，其它詞首字母都大寫，如backgroundColor 和linearGradient。

要更新咱們的頭部組件以使用這些樣式，而不是依賴於CSS類定義，咱們能夠在style 屬性以後添加className 屬性：

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社區是一個充滿活力的地方（這是一個理想的庫工做的緣由之一）。有不少樣式庫能夠用來幫助咱們創建咱們的風格，如Radium這樣強大的實驗室。

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

Radium容許咱們定義在React組件自己以外的公共樣式，它自動提供前綴，支持媒體查詢（如:hover和:active），簡化了內聯樣式，而且還有更多種類。

咱們不會在這篇文章中介紹Radium，由於它不在本系列的範圍以內，可是知道其餘的庫是很好的，特別是若是你想擴展內聯樣式的定義。

如今咱們知道如何組合咱們的組件，咱們沒有遇到太多的麻煩能夠作一些好看的。在下一部分中，咱們將立刻回到爲組件添加用戶交互性。