type
status
date
summary
tags
category
icon
使用CSS Module写法之后,样式的类名会被自动添加一个随机的hash字符串,如下:
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F958e1994-be0c-4d8a-ac7c-ea26c8971188%2FUntitled.png?table=block&id=fc35cfed-8cc2-4137-a706-671d02269fd6&t=fc35cfed-8cc2-4137-a706-671d02269fd6&width=948&cache=v2)
项目中使用了UI库,有时候需要定制其样式时,使用常规的方式会失效:
需要使用特定的语法规则,下述记录Less中基于
:global
的嵌套方式,其他CSS预处理也一样的,一共两种情况:- 修改子组件的样式;
- 组件的自适应样式;
修改子组件样式
修改子组件的样式,可以使用下述方式:
组件的自适应样式
一般页面自适应会在 html 或 body 标签添加一个类名,例如pc 和 移动端为:
如果页面需要适配不同设备的展示,则可以使用下述方式:
答疑
CSS Module构建hash是根据
文件路径+类名
生成的,因此可以结合 :global
和 :local
组合各种嵌套。其层级默认是继承关系,例如:
构建的产物为:
但可以使用
:local
改变这个层级结构构建的产物为: