React之使用Scss

Scss 基本使用（变量、嵌套）

• 安装 node-sass

npm i node-sass -D

• 创建文件夹并新建一个 xx.scss 的文件

.container {
  width: 100vw;
  height: 100vh;
  background-color: #afa407;
  .text {
    font-size: 20px;
    color: #880ae8;
  }
}

• 在同个文件夹目录下使用 xx.scss 文件

import { PageWraperContext } from "@/context";
import React, { useContext, useMemo } from "react";
import "./index.scss";
const GrandSon = () => {
  const { right, setRight } = useContext(PageWraperContext);

  const clickRight = () => {
    setRight(right + 1);
    console.log("child1==>right==>", right);
  };

  const RenderChild2 = () =>
    useMemo(() => {
      console.log("child1==>right==>", right);
      return (
        <div className="container">
          <div className="text">我是孙子组件:{right}</div>
          <button onClick={clickRight}>点击Right次数 </button>
        </div>
      );
    }, [right]);

  return RenderChild2();
};
export default GrandSon;