在React中編寫CSS的不同方法

我們都知道如何將樣式錶鍊接到HTML ，但是在React單頁應用程序（SPA）中的樣式提供了更多選擇。讓我們探索React中CSS的各種方法，強調其優勢和劣勢。

導入外部樣式表

此方法反映了傳統的CSS鏈接。

1. 創建一個CSS文件（例如style.css ）。
2. 編寫您的CSS規則。
3. 將其導入您的React組件：

導入“ ./style.css”;

例子：

從“反應”中導入反應；
導入“ ./components/css/app.css”;

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

導出默認應用；

這將從/Components/css文件夾中導入App.css 。

內聯風格

儘管由於關注可維護性，但通常會勸阻大型項目，但在特定情況下，內聯風格可能是實用的。 React的組件結構可緩解一些可維護性問題。

一個簡單的例子：

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

更有條理的方法使用樣式對象：

從“反應”中導入反應；

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

導出默認應用；

這適用於styles對像中定義的樣式。注意使用捲曲括號進行對象引用。

CSS模塊

CSS模塊提供本地範圍的班級名稱，以防止較大的應用程序中的命名衝突。每個組件都有自己獨特的類名稱。

1. 創建一個.module.css文件（例如styles.module.css ）。
2. 將其導入您的反應組件。
3. 將導入樣式與className ：

 / * styles.module.css */
.font {
  顏色：＃f00;
  字體大小：20px;
}

從“反應”中導入反應；
來自“ ./styles.module.css”的導入樣式;

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

導出默認應用；

樣式組件

樣式組件提供了一種在JavaScript中編寫實際CSS的方法，從而創建了樣式的React組件。好處包括獨特的班級名稱，動態樣式和更好的CSS組織。

安裝： npm install styled-components

導入： import styled from 'styled-components';

例子：

從“反應”中導入反應；
從“樣式組件”中導入樣式；

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

功能應用程序（）{
  返回<wrapper></wrapper>;
}

導出默認應用；

有條件的樣式

樣式組件允許使用CSS中的道具有條件的樣式，從而基於組件狀態或道具實現動態樣式更改。此示例使用三元操作員進行有條件的樣式：

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

結論

React提供不同的CSS樣式選項。最佳方法取決於項目規模，複雜性和個人喜好。此概述為選擇正確的React項目選擇正確的方法提供了堅實的基礎。

以上是在React中編寫CSS的不同方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！