灏天阁

React 引入 css 的几种方式

· Yin灏

前言

在 react 中，有几种不同的方式可以引入 css 样式。这些方式有各自的优缺点，适用于不同的场景。本文将介绍三种常见的方式：普通的 css 文件，css 模块和 styled-components。

方案介绍

css 文件引入

普通的 css 文件是最简单的方式，就是在 react 组件中直接引入 css 文件，例如：

import React from "react";
import "./App.css";

function App() {
  return (
    <div className="App">
      <h1>Hello, world!</h1>
    </div>
  );
}
export default App;

这种方式的好处是简单易用，不需要额外的配置或依赖。但是也有一些缺点，比如：

  • css 文件和 react 组件是分离的，不利于组件化开发和复用。
  • css 文件中的类名可能会发生冲突，导致样式覆盖或混乱。
  • css 文件中不能使用 react 的状态或属性来动态改变样式。

css 模块引入

css 模块是一种解决类名冲突的方式，它可以让每个组件拥有独立的作用域，避免全局污染。使用 css 模块，需要将 css 文件命名为[组件名].module.css，例如：

import React from "react";
import styles from "./App.module.css";

function App() {
  return (
    <div className={styles.App}>
      <h1 className={styles.title}>Hello, world!</h1>
    </div>
  );
}
export default App;

这种方式的好处是可以保证类名的唯一性，避免冲突。但是也有一些缺点，比如：

  • css 模块仍然是分离的文件，不利于组件化开发和复用。
  • css 模块需要特定的命名规则和配置，不够灵活。
  • css 模块仍然不能使用 react 的状态或属性来动态改变样式。

styled-components 引入

styled-components 是一种将 css 和 react 组件结合在一起的方式，它可以让我们在 js 文件中直接写 css 代码，例如：

import React from "react";
import styled from "styled-components";

const StyledApp = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
`;

const StyledTitle = styled.h1`
  color: ${(props) => props.color || "black"};
`;

function App() {
  const [color, setColor] = React.useState("black");

  const handleClick = () => {
    setColor(color === "black" ? "red" : "black");
  };

  return (
    <StyledApp>
      <StyledTitle color={color} onClick={handleClick}>
        Hello, world!
      </StyledTitle>
    </StyledApp>
  );
}

export default App;

这种方式的好处是可以实现组件化开发和复用，也可以使用 react 的状态或属性来动态改变样式。但是也有一些缺点，比如：

  • styled-components 需要安装第三方库，并且需要学习新的语法和规范。
  • styled-components 可能会影响性能和调试，因为它会在运行时生成和注入样式。
  • styled-components 可能会导致样式和逻辑混杂在一起，不利于代码的可读性和维护性。

- Book Lists -