你知道吗，超过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。