我們都知道如何將樣式錶鍊接到HTML ，但是在React單頁應(yīng)用程序（SPA）中的樣式提供了更多選擇。讓我們探索React中CSS的各種方法，強(qiáng)調(diào)其優(yōu)勢(shì)和劣勢(shì)。

導(dǎo)入外部樣式表

此方法反映了傳統(tǒng)的CSS鏈接。

1. 創(chuàng)建一個(gè)CSS文件（例如style.css ）。
2. 編寫您的CSS規(guī)則。
3. 將其導(dǎo)入您的React組件：

導(dǎo)入“ ./style.css”;

例子：

從“反應(yīng)”中導(dǎo)入反應(yīng)；
導(dǎo)入“ ./components/css/app.css”;

功能應(yīng)用程序（）{
  返回 （
    <div classname="main"></div>
  ）；
}

導(dǎo)出默認(rèn)應(yīng)用；

這將從/Components/css文件夾中導(dǎo)入App.css 。

內(nèi)聯(lián)風(fēng)格

儘管由於關(guān)注可維護(hù)性，但通常會(huì)勸阻大型項(xiàng)目，但在特定情況下，內(nèi)聯(lián)風(fēng)格可能是實(shí)用的。 React的組件結(jié)構(gòu)可緩解一些可維護(hù)性問題。

一個(gè)簡(jiǎn)單的例子：

<div classname="main" style="{{" color:></div>

更有條理的方法使用樣式對(duì)象：

從“反應(yīng)”中導(dǎo)入反應(yīng)；

功能應(yīng)用程序（）{
  const樣式= {
    主要的： {
      背景色：“＃f1f1f1”，
      寬度：“ 100％”，
    }，，
    inputText：{
      填充：“ 10px”，
      顏色：“紅色”，
    }，，
  };
  返回 （
    <div classname="main" style="{styles.main}"></div>
  ）；
}

導(dǎo)出默認(rèn)應(yīng)用；

這適用於styles對(duì)像中定義的樣式。注意使用捲曲括號(hào)進(jìn)行對(duì)象引用。

CSS模塊

CSS模塊提供本地範(fàn)圍的班級(jí)名稱，以防止較大的應(yīng)用程序中的命名衝突。每個(gè)組件都有自己獨(dú)特的類名稱。

1. 創(chuàng)建一個(gè).module.css文件（例如styles.module.css ）。
2. 將其導(dǎo)入您的反應(yīng)組件。
3. 將導(dǎo)入樣式與className ：

 / * styles.module.css */
.font {
  顏色：＃f00;
  字體大?。?0px;
}

從“反應(yīng)”中導(dǎo)入反應(yīng)；
來自“ ./styles.module.css”的導(dǎo)入樣式;

功能應(yīng)用程序（）{
  返回 （
    <h1 classname="{styles.font}">你好世界</h1>
  ）；
}

導(dǎo)出默認(rèn)應(yīng)用；

樣式組件

樣式組件提供了一種在JavaScript中編寫實(shí)際CSS的方法，從而創(chuàng)建了樣式的React組件。好處包括獨(dú)特的班級(jí)名稱，動(dòng)態(tài)樣式和更好的CSS組織。

安裝： npm install styled-components

導(dǎo)入： import styled from 'styled-components';

例子：

從“反應(yīng)”中導(dǎo)入反應(yīng)；
從“樣式組件”中導(dǎo)入樣式；

const wrapper = styplet.div`
  寬度：100％；
  身高：100px;
  背景色：紅色；
  顯示：塊;
`;

功能應(yīng)用程序（）{
  返回<wrapper></wrapper>;
}

導(dǎo)出默認(rèn)應(yīng)用；

有條件的樣式

樣式組件允許使用CSS中的道具有條件的樣式，從而基於組件狀態(tài)或道具實(shí)現(xiàn)動(dòng)態(tài)樣式更改。此示例使用三元操作員進(jìn)行有條件的樣式：

（示例代碼證明了為簡(jiǎn)潔而省略的條件樣式，但解釋了概念。）

結(jié)論

React提供不同的CSS樣式選項(xiàng)。最佳方法取決於項(xiàng)目規(guī)模，複雜性和個(gè)人喜好。此概述為選擇正確的React項(xiàng)目選擇正確的方法提供了堅(jiān)實(shí)的基礎(chǔ)。

以上是在React中編寫CSS的不同方法的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！