在React中编写CSS的不同方法

前端小工
315 阅读5分钟

我们都熟悉将样式表链接到HTML文档的<head> 的标准方式，对吗？这只是我们能够编写CSS的几种方式之一。但是，在单页应用（SPA）中，比如在React项目中，样式表是什么样子的呢？

事实证明，有几种方法可以对React应用程序进行样式设计。有些与传统的样式设计相重叠，有些则不太一样。但让我们来数一数我们可以做的所有方法。

导入外部样式表

顾名思义，React可以导入CSS文件。这个过程类似于我们在HTML中链接CSS文件的方式<head> 。

  1. 在你的项目目录下创建一个新的CSS文件。
  2. 编写CSS。
  3. 把它导入到React文件中。

像这样。

import "./style.css";

这通常是在文件的顶部，在其他导入发生的地方。

import { React } from "react";
import "./Components/css/App.css";
function App() {
  return (
    <div className="main">
    </div>
  );
}
export default App;

在这个例子中，一个CSS文件被导入到/Components/css 文件夹中的一个App.js 。

写入内联样式

你可能已经习惯于听到内联样式对可维护性和其他方面来说不是那么好，但在某些情况下（这里有一个！），它是有意义的。在React中，可维护性是一个较小的问题，因为CSS通常已经放在同一个文件中。

这是一个React中内联样式的超级简单的例子。

<div className="main" style={{color:"red"}}>

不过，更好的方法是使用对象。

  1. 首先，创建一个包含不同元素样式的对象。
  2. 然后使用style 属性将其添加到一个元素中，然后选择要样式的属性。

让我们在上下文中看看。

import { React } from "react";
function App() {
  const styles = {
    main: {
      backgroundColor: "#f1f1f1",
      width: "100%",
    },
    inputText: {
      padding: "10px",
      color: "red",
    },
  };
  return (
    <div className="main" style={styles.main}>
      <input type="text" style={styles.inputText}></input>
    </div>
  );
}
export default App;

这个例子包含一个styles 对象，其中又有两个对象，一个是.main 类，另一个是一个文本输入，它们包含的样式规则与我们期望在外部样式表中看到的相似。然后，这些对象被应用于返回的标记中的元素的style 属性。

请注意，在引用样式时使用了大括号，而不是我们在普通HTML中通常使用的引号。

使用CSS模块

CSS模块......这些模块到底发生了什么，对吗？它们有局部范围变量的好处，可以和React一起使用。但它们到底是什么呢？

引用回溯的文档。

CSS模块的工作原理是将单个CSS文件编译成CSS和数据。CSS的输出是正常的、全局的CSS，可以直接注入到浏览器中，也可以串联起来，写到一个文件中供生产使用。数据是用来将你在文件中使用的人类可读名称映射到全局安全的输出CSS。

更简单地说，CSS模块允许我们在多个文件中使用相同的类名而不发生冲突，因为每个类名都被赋予了一个独特的程序性名称。这在大型应用中特别有用。每一个类的名称都是根据它被导入的特定组件的局部范围而定的。

一个CSS模块样式表与普通的样式表相似，只是扩展名不同（例如：styles.module.css ）。下面是它们的设置方法。

  1. 创建一个扩展名为.module.css 的文件。
  2. 将该模块导入到React应用中（就像我们之前看到的那样）
  3. 添加一个className 到一个元素或组件，并从导入的样式中引用特定的样式。

超级简单的例子。

/* styles.module.css */
.font {
  color: #f00;
  font-size: 20px;
}

import { React } from "react";
import styles from "./styles.module.css";
function App() {
  return (
    <h1 className={styles.heading}>Hello World</h1>
  );
}
export default App;

使用styled-components

你使用过styled-components吗？它相当流行，允许你在你的JavaScript中使用实际的CSS构建自定义组件。styled-component基本上是一个带有--准备好了--样式的React组件。它的一些特点包括独特的类名、动态样式和更好地管理CSS，因为每个组件都有自己独立的样式。

在命令行中安装styled-components npm包。

npm install styled-components

接下来，将其导入React应用程序中。

import styled from 'styled-components'

创建一个组件并给它分配一个styled属性。注意在Wrapper 对象中使用由反斜线表示的模板字样。

import { React } from "react";
import styled from "styled-components";
function App() {
  const Wrapper = styled.div`
    width: 100%;
    height: 100px;
    background-color: red;
    display: block;
  `;
  return <Wrapper />;
}
export default App;

上述Wrapper 组件将被渲染成一个包含这些样式的div。

条件性的样式设计

样式化组件的一个优点是，组件本身是功能性的，比如你可以在CSS中使用道具。这就为条件性语句和基于状态或道具改变样式打开了大门。

这里有一个演示，展示了这一点。

在这里，我们正在对显示状态下的div的display 属性进行操作。这个状态是由一个按钮控制的，当点击这个按钮时，它将切换DIV的状态。这反过来又会在两个不同状态的样式之间进行切换。

在内联if 语句中，我们使用? 而不是通常的if/else 语法。else 部分是在分号之后。记得一定要在状态被初始化后再调用或使用。例如，在最后一个演示中，状态应该在Wrapper 组件的样式之上。

Happy React styling!

这就结束了，伙计们！我们看了一些不同的方法。我们看了一些在React应用程序中编写样式的不同方法。当然，你使用的方法取决于具体情况。希望现在你已经对它们有了很好的了解，并且知道你的React样式库中有一堆工具。

avatar
文章
阅读
粉丝