七、CSS Module

• CSS 模块
  • 创建一个 xxx.module.css 文件
  • 在组件中引入 css
    • import classes from "./App.module.css";
  • 通过 classes 设置类
    • <p className={classes.p1}>我是一个段落</p>
• 可以动态设置唯一的 class ，不担心重名冲突

（一） src/A.js

import React from "react";
import classes from "./A.module.css";
// import classes from "./App.module.css";

export default function A() {
  return <div className={classes.p1}>A</div>;
}

（二） src/A.module.css

.p1 {
  background-color: tomato;
  color: #fff;
}

（三） src/App.js

import React, { useState } from "react";
import A from "./A";
import classes from "./App.module.css";

export default function App() {
  const [showBorder, setShowBorder] = useState(false);
  const clickHandler = () => {
    setShowBorder(!showBorder);
  };

  return (
    <div>
      <A />
      <p className={`${classes.p1} ${showBorder ? classes.border : classes.p1}`}>我是一个段落</p>
      <button onClick={clickHandler}>点我一下</button>
    </div>
  );
}

（四） src/App.module.css

.p1 {
  color: red;
  background-color: #bfa;
}

.border {
  border: 1px solid red;
}