如何使用 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 组件的黄金标准。