【全棧React】第9天: 樣式

zilu 發(fā)布于2019-08-20 18:33 / 3288人閱讀

摘要：我們將為組件賦值，并使用選擇器來定位頁面上的元素，讓瀏覽器處理樣式。的工作方式是將因此命名父樣式作為子樣式的樣式。這通常是錯誤的原因，因為類通常具有通用名稱，并且易于覆蓋非特定類的類樣式。反之，我們的樣式名稱需要使用駝峰命名方式。

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

沒有樣式的應用是不完整。我們將看看我們可以使用不同的方法來調整組件，從傳統(tǒng)的CSS到內(nèi)聯(lián)樣式。

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

我們來看幾種不同的方式來組合一個組件。

級聯(lián)樣式表(CSS)

內(nèi)聯(lián)樣式

樣式庫

級聯(lián)樣式表(CSS)

使用CSS來構造我們的Web應用程序是我們已經(jīng)熟悉的一個實踐，并不是什么新鮮事。如果你以前曾經(jīng)寫過Web應用程序，那么你最有可能使用/編寫了CSS。簡而言之，CSS是我們?yōu)閷嶋H標記之外的DOM組件添加樣式的一種方式。

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

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

假設我們想使用CSS將標題顏色變成橙色。我們可以通過在我們的頁面中添加一個樣式表，并在CSS類中定位.header 的CSS類來輕松處理。

回想一下，我們的 Header 組件的render函數(shù)目前看起來像這樣：

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

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

    return (
      
        

        
          {this.props.title}
        

        

        
      
    )
  }
}

我們可以通過在普通的css文件中定義一個.header類的樣式來定位header 。按照慣例，我們需要確保我們在HTML頁面中使用tag來包含CSS類。假設我們將樣式定義在與index.html文件相同的目錄中的styles.css文件中，該標簽將如下所示：

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

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

首先關于CSS的最常見的抱怨之一是級聯(lián)功能本身。 CSS的工作方式是將_cascades_（因此命名）父樣式作為子樣式的樣式。這通常是錯誤的原因，因為類通常具有通用名稱，并且易于覆蓋非特定類的類樣式。

我們使用的例子中.header的類名不是很特別。頁面本身不僅可以有一個標題，而且頁面上的內(nèi)容框可能是文章，甚至我們放置在頁面上的廣告都可能有一個.header類名稱。

我們可以避免這個問題的一個方法是使用像css modules這樣的東西，為我們定義自定義的非常獨特的CSS類名。
除了CSS模塊之外，CSS模塊還沒有什么神奇之處，它強制我們的構建工具為我們定義了自定義的CSS類名，所以我們可以使用不太獨特的名稱。
我們稍后將在工作流程中研究使用CSS模塊。

React提供了一種不太新的方法，通過允許我們與JSX一起定義樣式，從而完全避免了這個問題。

內(nèi)聯(lián)樣式

向實際組件添加樣式不僅允許我們定義組件中的樣式，還可以根據(jù)應用的不同狀態(tài)動態(tài)定義樣式。

React為我們提供了一種使用JavaScript對象而不是多帶帶的CSS文件來定義樣式的方法。讓我們再次使用Header 組件，而不是使用css類來定義樣式，讓我們將它移動到內(nèi)聯(lián)樣式。

使用style 屬性可以輕松地定義組件中的樣式。 React內(nèi)的所有DOM元素都接受一個style屬性，該屬性預計是一個具有駱駝命名的對象，定義了一個樣式名稱和值映射到它們的值。

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

const style = { color: "blue" }

  This text will have the color blue

請注意，我們使用兩個大括號定義了樣式。 當我們在模板標簽中傳遞一個JavaScript對象時，括號里是JS對象，括號外部是模板標簽。
另一個可能使這個更清楚的例子是傳遞在JSX之外定義的JavaScript對象，即
render() {
  const divStyle = { color: "blue" }
  return (
    This text will have the color blue
  );
}

在任何情況下，由于這些是JS定義的樣式，所以我們不能使用任何傳統(tǒng)的css樣式名稱（因為background-color 在JavaScript中將無效）。反之，我們的樣式名稱需要使用駝峰命名方式。

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

要更新我們的頭部組件以使用這些樣式，而不是依賴于CSS類定義，我們可以在style 屬性之后添加className 屬性：

class Header extends React.Component {
  // ...
  render() {
    // Classes to add to the  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 (
      
        
          
          
          
        

        
          {this.props.title}
        

        

        {/* Adding an onClick handler to call the showSearch button */}
        
      
    )
  }
}

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

樣式庫

React社區(qū)是一個充滿活力的地方（這是一個理想的庫工作的原因之一）。有很多樣式庫可以用來幫助我們建立我們的風格，如Radium這樣強大的實驗室。

大多數(shù)這些庫都是基于React開發(fā)人員通過使用React定義的工作流。

Radium允許我們定義在React組件本身之外的公共樣式，它自動提供前綴，支持媒體查詢（如:hover和:active），簡化了內(nèi)聯(lián)樣式，并且還有更多種類。

我們不會在這篇文章中介紹Radium，因為它不在本系列的范圍之內(nèi)，但是知道其他的庫是很好的，特別是如果你想擴展內(nèi)聯(lián)樣式的定義。

現(xiàn)在我們知道如何組合我們的組件，我們沒有遇到太多的麻煩可以做一些好看的。在下一部分中，我們將馬上回到為組件添加用戶交互性。

云服務器 GPU云服務器明解c語言第9章 javascript基礎教程第9版 java 9天快速第7天:CSS入門

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/84670.html

【全棧React】React 30天教程索引

摘要：今天我們將討論創(chuàng)建組件的最終方案，即無狀態(tài)函數(shù)的純組件。今天我們正在研究一種處理提出的復雜數(shù)據(jù)的方法，稱為體系結構。第天部署介紹今天，我們將探討部署我們的應用所涉及的不同部分，以便外界可以使用我們的應用。本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3758原文：https://www.fullstackreact.com/3...

appetizerio 2019-08-20 18:33 評論0 收藏0
【全棧React】第6天: 狀態(tài)

摘要：無論何時狀態(tài)改變通過，組件將重新投遞。在調用函數(shù)之后，我們可以將第二個參數(shù)傳遞給函數(shù)，該函數(shù)將在狀態(tài)更新后保證被調用。今天，我們更新了我們的組件以使其處于狀態(tài)狀態(tài)，現(xiàn)在有必要處理如何使組件成為狀態(tài)。本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3824原文：https://www.fullstackreact.com/30-d...

leo108 2019-08-20 18:29 評論0 收藏0
【全棧React】第30天: 總結和更多的資源

摘要：本文轉載自眾成翻譯譯者鏈接原文我們做到了第天。歡迎來到最后一天恭喜你做到了我們此行的最后一個部分是通過參與。反應社區(qū)是活躍成長和友好的。本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3800原文：https://www.fullstackreact.com/30-days-of-react/day-30/ 我們做到了！第30天...

Miracle_lihb 2019-08-21 11:52 評論0 收藏0
【全棧React】第12天: 創(chuàng)建React應用

摘要：本文轉載自眾成翻譯譯者鏈接原文今天，我們將添加一個構建過程來存儲常見的構建操作，以便我們可以輕松地開發(fā)和部署我們的應用。在要創(chuàng)建應用的目錄中打開終端窗口。文件有一個的節(jié)點，這個應用本身將被自動掛載這是在文件中處理的。本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3822原文：https://www.fullstackreact...

solocoder 2019-08-20 18:33 評論0 收藏0
【全棧React】第28天: 部署

摘要：本文轉載自眾成翻譯譯者鏈接原文今天，我們將看看一些即將推出的選項，以便我們的網(wǎng)站啟動并運行。昨天我們離開了準備第一次部署我們的應用程序。現(xiàn)在的問題是我們要在哪里和如何部署讓我們來探索什么這與部署非頁應用程序類似。本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3802原文：https://www.fullstackreact.c...

liuhh 2019-08-21 11:52 評論0 收藏0