react中的全局样式与局部样式

王元肉==>个人主页

大家一起加油，我喜欢分专栏将知识打碎成一份一份小知识点，一篇文章只说一个知识点，因此每篇文章篇幅较短，希望大家不要介意。如有需要可以查看专栏看看是否有该文章中涉及到的知识点进行讲解的文章，如果大家觉得有帮助，希望大家三连支持一下。

推荐阅读

全局样式

App.js

import './App.css';
function App() {
  return (
    <ul>
      <li>app</li>
    </ul>
  );
}

export default App;

App.css

li {
    color: green;
}

当我们在App组件中引入另外一个组件，如下所示

Child.js

import React from 'react';
function Child() {
    return (
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
    );
}

export default Child;

我们发现，我们没有为Child组件的li添加样式，但是颜色也变成了绿色，受到了App组件中App.css中的样式的影响。

说明我们为App组件添加的样式是全局样式。会影响到其它组件的样式。

局部样式

使用xxx.module.css实现

修改App.css文件名为App.module.css;
将文件的内容修改为如下所示

App.module.css

.item {
    color: green;
}

App.js

import style from './App.module.css';
import Child from "./Child.js";
console.log(style); // 输出结果见下面图片所示
function App() {
  return (
    <>
    <ul>
      <li className={style.item}>app</li>
    </ul>
    <Child></Child>
    </>
  );
}

export default App;

Child.js

import React from 'react';
import style from "./Child.module.css";
console.log(style);
function Child() {
    return (
        <ul>
            <li className={style.item}>1</li>
            <li className={style.item}>2</li>
        </ul>
    );
}

export default Child;

Child.module.css

.item {
    color: red;
}

使用sass,less等css预处理器

安装

npm i sass

使用

App.js

import Child from "./Child.js";
import style from './App.module.scss';
console.log(style);
function App() {
  return (
    <>
      <ul>
        <li className={style.item}>app</li>
      </ul>
      <Child></Child>
    </>
  );
}

export default App;

App.module.scss

ul {
    .item {
        color: green;
    }
}

Child.js

import React from 'react';
import style from "./Child.module.scss";
function Child() {
    return (
        <ul>
            <li className={style.item}>1</li>
            <li className={style.item}>2</li>
        </ul>
    );
}

export default Child;

Child.module.scss

ul {
    .item {
        color: red;
    }
}

缺陷

可以正常的识别类和id选择器，但是无法识别一些选择器，如标签选择器

结束啦！