react的全局样式和局部样式

LiuJie_Boom

2024-04-25 帮助1人

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

全局样式

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选择器，但是无法识别一些选择器，如标签选择器

学新通

结束啦！

这篇好文章是转载于：学新通技术网

react的全局样式和局部样式

全局样式

局部样式

使用xxx.module.css实现

使用sass,less等css预处理器

安装

使用

缺陷

photoshop保存的图片太大微信发不了怎么办

《学习通》视频自动暂停处理方法

Android 11 保存文件到外部存储，并分享文件

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐

怎样阻止微信小程序自动打开