5种使用CSS样式化React的方法 [2023]
你知道吗，超过97%的网站使用CSS来进行样式设计？
CSS（层叠样式表）允许开发人员构建漂亮、易于浏览和呈现的网页。
CSS语言规定了文档如何呈现给用户。在这种情况下，文档是使用XML或HTML等标记语言编写的文件。
React中的样式是什么？
创建、运行和维护React应用的简单性是其受欢迎的主要原因。React是一个JavaScript库，而不是一个框架，它提供了更多预编写的函数和代码片段。
可重用组件的可用性、灵活性、代码稳定性、速度和性能是React在库和框架中排名靠前的原因之一。
在React中，样式是使用CSS使React应用的各个组件在视觉上更具吸引力的过程。然而值得注意的是，React使用JSX（JavaScript和XML）而不是HTML作为其标记语言。其中一个主要区别是，HTML使用.class来标记类，而JSX使用.ClassName来表示相同的含义。
为什么应该使用CSS来样式化React？
- 使应用响应式。现代Web应用应该在小屏幕和大屏幕上都可以访问。CSS允许您对React应用应用媒体查询，使其适应不同的屏幕尺寸。
- 加快开发过程。您可以在React应用的多个组件中使用相同的CSS规则。
- 使React应用可维护。使用CSS可以轻松对应用的特定组件/部分进行外观更改。
- 提高用户体验。CSS允许友好的格式化。逻辑位置中带有文本和按钮的React易于导航和使用。
开发人员可以使用多种方法来为其React应用创建样式。以下是一些最常见的方法：
编写内联样式
内联样式是样式化React应用的最简单方法，因为用户不需要创建外部样式表。样式直接应用于React代码。
值得注意的是，内联样式的优先级高于其他样式。因此，如果您有一个带有一些格式的外部样式表，它将被内联样式覆盖。
这是React应用中内联样式的示例。
import React from 'react';
import ReactDOM from 'react-dom/client';
const Header = () => {
return (
Hello World!!!!!
Add a little style!
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(显示的元素将显示一个带有浅蓝色背景的h1。
内联样式的优点
- 快速。这是最简单的方法，因为您直接将样式添加到要样式化的标记。
- 优先级高。内联样式会覆盖外部样式表。因此，您可以使用它来专注于特定功能，而不必更改整个应用程序。
- 用于原型设计。您可以使用内联样式在外部样式表上应用格式之前测试功能。
内联样式的缺点
- 可能会繁琐。直接样式化每个标记是耗时的。
- 有限制。您不能在内联样式中使用选择器和动画等CSS功能。
- 大量的内联样式使JSX代码难以阅读。
导入外部样式表
你可以将CSS写在一个外部文件中，然后将其导入到React应用中。这种方法与在HTML文档的标签中导入CSS文件类似。
为了实现这一点，你需要在应用的目录中创建一个CSS文件，将其导入到目标组件中，并为应用编写样式规则。
为了演示外部CSS样式表的工作原理，你可以创建一个CSS file并将其命名为App.css。然后可以按如下方式导出它。
import { React } from "react";
import "./Components/App.css";
function App() {
return (
);
}
export default App;上面的代码片段将一个外部样式表导入到App.js组件中。App.css文件位于Components文件夹中。
外部CSS样式表的优点
- 可重用。你可以在React应用的不同组件中使用相同的CSS规则。
- 使代码更易读。使用外部样式表时，易于理解代码。
- 能够使用高级CSS功能。在使用外部样式表时，可以使用伪类和高级选择器。
外部CSS样式表的缺点
- 需要可靠的命名约定以确保样式不会被覆盖。
使用CSS模块
React应用可能会变得非常庞大。CSS动画名称和类名默认情况下是全局作用域的。当处理大型样式表时，这可能会导致一个样式覆盖另一个样式的问题。
CSS模块通过在本地范围内定义动画和类名来解决这个问题。这种方法确保类名仅在需要它们的文件/组件中可用。每个类名都有一个唯一的编程名称，避免冲突。
要使用CSS模块，创建一个带有.module.css的文件。如果你想将样式表命名为style，文件名将为style.module.css。
将创建的文件导入到你的React组件中，然后你就可以开始使用了。
你的CSS文件可能如下所示：
/* styles.module.css */
.font {
color: #f00;
font-size: 30px;
}你可以按如下方式在App.js中导入CSS模块：
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
Hello Geekflare reader
);
}
export default App;使用CSS模块的优点
- 与SCSS和CSS轻松集成
- 避免类名冲突
使用CSS模块的缺点
- 对于初学者来说，使用CSS模块引用类名可能会令人困惑。
使用Styled-Components
Styled-Components允许开发人员在JavaScript代码中使用CSS创建组件。Styled-Components充当带有样式的React组件。Styled-Components提供了动态样式和唯一的类名。
要开始使用Styled-Components，你可以使用以下命令将该包安装到根文件夹中：
npm install styled-components下一步是将Styled-Components导入到你的React应用中
以下是一个使用Styled-Components的App.js的代码片段；
import { React } from "react";
import styled from "styled-components";
function App() {
const Wrapper = styled.div`
width: 80%;
height: 120px;
background-color: lightblue;
display: block;
`;
return ;
}
export default App;渲染的应用程序将具有从Styled Components导入的上述样式。
Styled Components的优点
- 可预测。在这种样式化方法中，样式嵌套到各个组件中。
- 无需关注类命名约定。只需编写样式，软件包会处理其余部分。
- 您可以将Styled Components导出为props。Styled Components将普通CSS转换为React组件。因此，您可以重用此代码，通过props扩展样式并导出。
Styled Components的缺点
- 您必须安装第三方库才能开始使用。
语法上令人敬畏的样式表（SASS/ SCSS）
SASS提供了更强大的工具和功能，这些功能在普通CSS中缺失。您可以通过这些扩展以两种不同的样式编写样式; .scss和.sass。
SASS的语法类似于常规CSS的语法。但是，在SASS中编写样式规则时，您不需要开放和关闭大括号。
SASS的简单代码片段将显示如下;
nav
ul
margin-right: 20px
padding: 0
list-style: list
li
display: block
a
display: block
padding: 6px 12px
text-decoration: underline
nav要开始在React应用程序中使用SASS，您需要首先将SASS编译为纯CSS。通过使用Create React App命令设置应用程序后，可以安装node-sass来处理编译。
npm install node-sass然后，您可以创建文件并为其指定.scss或.sass扩展名。然后，您可以以正常方式导入文件。例如;
import "./Components/App.sass";SASS/SCSS的优点
- 它具有许多动态功能，如混合、嵌套和扩展。
- 使用SASS/SCSS时，不需要编写大量样板代码来编写CSS代码。
SASS/SCSS的缺点
- 样式是全局的，因此可能遇到覆盖问题。
哪种样式化方法最好？
既然我们已经讨论了五种方法，您想知道哪种方法最好。在这个讨论中，很难确定明显的赢家。但是，以下考虑因素将帮助您做出明智的决策:
- 性能指标
- 是否需要design system
- 优化代码的容易程度
内联样式适用于只有几行代码的简单应用程序。但是，其他所有方法;外部样式表、SASS、Styled Components和CSS模块，都适用于大型应用程序。
在大型React应用程序中维护CSS的最佳实践是什么？
- 避免内联样式。在大型React应用程序中为每个标签编写内联CSS样式可能会很繁琐。相反，使用适合您需求的外部样式表。
- Lint your code.诸如Stylelint之类的代码检查工具可以突出显示代码中的样式错误，以便您及早修复它们。
- 定期进行代码审查。编写CSS似乎很有趣，但定期进行代码审查可以轻松地发现并修复错误。
- 对CSS文件进行自动化测试。Enzyme和Jest是您可以用来自动化测试CSS代码的强大工具。
- 保持代码DRY。处理常用样式（如颜色和边距）时，使用实用的变量和类，符合“不要重复自己”（DRY）原则。
- 使用命名约定，例如块元素修饰符。这种方法可以轻松编写易于理解和重用的CSS类。
结论
以上是一些您可以用于为React应用程序添加样式的方法。样式化方法的选择将取决于您的需求、技能和喜好。您甚至可以在React应用程序中结合多种样式化方法，例如内联和外部样式表。
您还可以探索一些前端开发人员的最佳CSS frameworks and libraries。