CSS IN JS

作者: 生命里那束光 | 来源:发表于2022-05-24 08:04 被阅读0次

一、组件样式覆盖问题

  • 在Layout组件的index.scss中添加样式
.navBar {
  background-color: pink;
}
  • Home组件中的样式也跟着发生了改变,说明组件中的样式是相互影响的。
  • 原因:在配置路由时,Layout和 Home 组件都被导入到项目中,那么组件的样式也就被导入到项目中了。如果组件之间样式名称相同,那么一个组件中的样式就会在另一个组件中也生效,从而造成组件之间样式相互覆盖的问题。
  • 结论:默认,只要导入了组件,不管组件有没有显示在页面中,组件的样式就会生效。
  • 解决方案
    • 手动处理 (起不同的类名)
    • CSS IN JS : 以js的方式来处理css
    • css不是一门编程语言,css没有所有的局部作用域全局作用域这样的区分。。。css只有全局作用域

二、CSS IN JS

  • CSS IN JS:是使用 JavaScript 编写 CSS 的统称,用来解决 CSS 样式冲突、覆盖等问题

  • CSS IN JS 的具体实现有 50 多种,比如:React常用(CSS Modules、styled-components)、 Vue常用(<style scoped> 、css modules)等

  • 推荐使用:CSS Modules (React脚手架已集成,可直接使用)

三、CSS Modules 的说明

  • CSS Modules 通过对 CSS 类名重命名,保证每个类名的唯一性,从而避免样式冲突的问题
  • 换句话说:所有类名都具有“局部作用域”,只在当前组件内部生效
  • 在 React 脚手架中:文件名、类名、hash(随机)三部分,只需要指定类名即可 BEM
  • xxxx.module.css
/* 自动生成的类名,我们只需要提供 classname 即可 */
[filename]_[classname]_[hash]
// 类名
.error {}  .red{}
// 生成的类名为:
.NavHeader_error__ax7yz   .NavHead_red_abcdc

四、在项目中使用css Modules

  • 创建名为 [name].module.css 的样式文件(React脚手架中的约定,与普通 CSS 作区分)
// 在 CityList 组件中创建的样式文件名称:
index.module.css
  • 组件中导入该样式文件(注意语法)
// 在 CityList 组件中导入样式文件:
import styles from './index.module.css'
  • 通过 styles 对象访问对象中的样式名来设置样式
<div className={styles.test}></div>

五、css module的注意点

  • 类名最好使用驼峰命名,因为最终类名会生成styles的一个属性
.tabBar {}

styles.tabBar
  • 如果没有使用驼峰命名,对于不合法的命名,需要使用[]语法
.tab-bar {}

styles['tab-bar']
  • 如果是全局的类名,应该使用:global(.类名)的方式,不然会把全局类名给修改掉
:global(.icon-map) {   }

这样css modules就不会修改掉类名了

六、css module配合sass

  • css moudule也可以配合sass来使用,创建名为[name].module.scss
.father {
  .son {
    font-size: 30px;
  }

  :global {
    .son2 {
      font-size: 20px;
    }
  }
}
  • 使用css modules解决Login组件样式冲突问题

七、css modules的使用步骤

  1. index.scss改成index.module.scss
.list {
  background-color: pink;
  color: red;
    :global {
        xxxx
    }
}

  1. 导入样式的时候进行修改
- import './index.scss'

+ import styles from './index.module.scss'
  1. 使用的时候需要修改
- <div className="list">文章列表组件</div>

+ <div className={styles.list}>文章列表组件</div>

相关文章

网友评论

      本文标题:CSS IN JS

      本文链接:https://www.haomeiwen.com/subject/pxsrprtx.html