踩坑笔记(八):React中局部css样式的实现

 前言:在Vue项目组可以直接通过添加scoped的方式实现局部样式;但在React项目中,在组件中需要设置css/less样式,有时会出现className冲突的情况,导致影响到其他组件的问题。因此,在查阅相关资料后,在这里总结下React项目中局部样式的设置与实现。

步骤:

  1. 将css/less等样式文件命名为xxx.module.css/less

  2. 在jsx文件通过import导入

//普通导入方式
import "./job.css"
// 局部样式导入方式,styles命名自定义
import styles from "./job.module.css'

备注:这里测试less文件好像不生效;需要引入css才可以

  1. 在render函数中定义命名j局部类选择器
//普通定义类名
className="container"
//局部样式定义类名
className={styles.container}
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页