在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中文网其他相关文章！