如何使用 CSS 為 React 組件設置樣式

您可以使用多種技術為您的 React 應用程序和頁面設置樣式。 其中最簡單的方法是下載 React 組件庫。 但是，即使在使用庫時，您也遲早需要添加自定義樣式。 那麼，最好的方法是什麼？

對於小型項目，您可以使用內聯樣式、模塊或自己編寫className規範來輕鬆地為您的應用程序設置樣式。 對於動態項目——比如應用程序——最好使用一個可以讓你輕鬆實現 props 的庫。

或者，您可以使用帶有預構建樣式的 Tailwind UI 等實用工具包。 如果您需要渲染模型或演示文稿，React 友好的 UI 套件是您的最佳選擇。

使用className的實用樣式

在 React 中，實用的 CSS 樣式是通過className屬性應用的。

這也相當於為您的項目使用樣式表。 由於 React 是由組件結構驅動的，因此您可以僅為特定需求導入樣式表。

讓我們看一個例子。

應用程序.css

 .CSS-span { display: inline-block; transform: rotate(-1deg); position: relative; color: #fff; background-color: #dd9662; padding: 1px 5px 1px 5px; border-radius: 5px; }

應用程序.js

 import './app.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> How to Style React Components with <span className="CSS-span">CSS</span> </p> </header> </div> ); }

這將是結果：

這是一種完全有效的香草技術。 而且，最常用於聲明將在核心組件中重用的全局變量。

唯一需要注意的是，隨著項目的增長，命名衝突的可能性也會增加。

同樣，管理數百個樣式表的效率成本高得離譜。

將 JSX 用於內聯樣式

React 允許您使用內聯樣式來設置 DOM 元素的樣式。 雖然 CSS 邏輯保持不變，但樣式本身必須通過 JavaScript。 這也稱為 JSX。

讓我們看一個例子：

標題.js

 function Headline(){ const headlineStyle = { backgroundColor: "#fff", lineHeight: "1.5", height: "2rem", border: "none", color: "black" } return ( <div style= { headlineStyle } > <h2>Headline title</h2> <p>the sub-headline</p> </div> ) }

您會注意到的一件事是，我們使用lineHeight而不是寫line-height 。

對此的解釋是， “由於 JSX 更接近 JavaScript 而不是 HTML，所以 React DOM 使用camelCase屬性命名約定而不是 HTML 屬性名稱。” .

內聯樣式通常用於展示示例，也用於為特定元素添加動態樣式。 此外，內聯樣式不支持偽元素或媒體查詢，因為您只能傳遞style 。 使用樣式表是更好的選擇。

使用 CSS 模塊創建本地範圍

如果您想將自定義樣式應用於組件而不發生命名衝突，一種方法是通過 CSS 模塊。

這是一種方法，您可以將本地範圍單獨應用於每個組件。

像這樣：

Header.module.css

 .container { width: 1280px; margin: 1rem auto; padding: 1rem; } .header { background-color: #ffffff; color: #000000; font-weight: 700; }

頁眉.js

 import styles from './Header.module.css'; function Header() { return ( <div className={styles.container}> <h2 className={styles.header}>Using CSS Modules in React</h2> </div> ); }

您還可以執行諸如組合之類的操作，您可以從另一個樣式表中調用特定樣式 - 避免需要兩次重寫相同的邏輯。

 .header { composes: header from './style.css'; }

JS 中的 CSS

與 Vue 和 Svelte 等框架不同，React 不提供自己的樣式界面。

因此，雖然您可以使用上述方法為組件編寫 CSS，但聖杯方法是在 JS 庫中使用 CSS。 每個庫都有其優點和缺點，但總的來說，優點保持不變：

• 各種風格變化的道具。
• 可訪問的主題。
• 基於組件的樣式範圍。
• 使用 JavaScript 函數的動態 CSS 變量。

JS 中最流行的 CSS 解決方案是樣式化組件。

其他值得注意的選擇包括 Emotion 和 Linaria。 為了演示，讓我們看看如何使用 Styled Components 庫將 CSS 集成到 React 組件中。

StyledComponents.js

 import styled from 'styled-components'; const HeaderWrapper = styled.section` padding: 4em; background: orange; `; const HeaderTitle = styled.h2` font-size: 2rem; text-align: center; color: black; `; <HeaderWrapper> <HeaderTitle>Example of creating a React component with Styled Components.</HeaderTitle> </HeaderWrapper>

首先，我們創建一個名為HeaderWrapper的新組件，它將為我們的標題標題呈現一個<section>容器。 然後我們創建另一個名為HeaderTitle的組件並將 CSS 變量傳遞給它。 因此，在某種程度上，這與使用 Web 組件完全相同，只是在 React 的上下文中。

使用 CSS 框架

並不是前端的一切都在向框架和庫發展。

這更多地與從無到有開始一個項目效率低下的事實有關。 像 Tailwind CSS 這樣的框架有助於減輕從頭開始編寫所有應用程序結構的需要。 Tailwind CSS 的工作方式是該框架提供了預先確定的實用程序類，讓您無需編寫獨立的 CSS 即可構建佈局。

TailwindCSSApp.js

 function Header() { return ( <div className="container mx-auto bg-gray-500 rounded-xl shadow border p-8 m-10"> <p className="text-3xl text-black-700 font-bold mb-5"> Tailwind CSS with React </p> <p className="text-black-300 text-lg"> All styling defined with utility classes </p> </div> ); } export default Header;

因此，我們可以直接編寫框架指定的樣式，而不是使用常量定義組件樣式。 像這樣的方法非常有效，例如，您可以導入其他人製作的 UI 組件（例如卡片）。

Tailwind CSS 特別受歡迎，因為您可以直接複製和粘貼代碼片段，並在您的應用設計中使用它們而不會產生任何後果。

使用 UI 庫

樣式化 React 組件的最後一種方法是使用 UI 庫。 與框架不同，UI 庫遵循樣式指南。 因此，在很多方面，它都帶有一種已經預先確定的風格。 Mantine 和 Material UI 之類的都是首選。

唯一的“缺點”是你必須花費相當多的時間來學習那個特定的庫。 但是，對於框架也可以這樣說。 儘管有入門障礙，但 CSS 框架和 UI 庫都是樣式化 React 組件的黃金標準。