ant Design 中使用 :globa

ant Design 中使用 :global

问题描述

接触 antd 项目，发现样式里面有 :global 写法，研究一下

问题结果

:global 其实是 css module 的一种写法，被其包围的类名不会被编译转换
less 文件中的写法如下：

.houseInfoCard {margin-bottom: 20px;:global {.ant-form-item {margin-bottom: 10px;}}
}

这里这么写主要是为了覆盖 antd 的样式；
有两点需要注意：

引入的 antd 组件类名没有被 CSS Modules 转化，所以被覆盖的类名 .ant-form-item 必须放到 :global 中。
因为上一条的关系，覆盖是全局性的。为了防止对其他 Select 组件造成影响，所以需要包裹额外的 className 限制样式的生效范围。

ant Design 中使用 :globa相关推荐

Ant Design中Form组件重置验证条件resetFields()方法
Ant Design中Form组件重置验证条件resetFields()方法需求, 实际完成时间(与任务生成日期联动,若任务生成日期选上,实际完成时间禁选) 却发现在验证完之后填写实际完成时间后任务 ...
Ant Design 中覆盖组件样式
使用场景: 比如ant design中的抽屉Drawer这个组件,由于组件库中的样式是给了padding为25px,但是我当前的需求是不需要padding,那么就需要写样式覆盖掉之前组件定义的样式. ...
html5中折叠面板,Ant Design中折叠面板Collapse
这段时间做react项目遇到一些平常并不会去在意的问题,但解决的时候又需要思考一番.这次开发用到了蚂蚁金服的UI框架Ant Design.项目中有一个模块的样式和功能用到了折叠面板Collapse组件 ...
Ant Design中select框往下滑动会自动回到顶部的问题
问题重现: 用户在使用如下图所示的选择框时,在向下滑动时,鼠标再次移动,滑竿会自动回到顶部. 代码定位: 问题分析: 获取到的dataFromOptions中是以key,value形式存在的. 而当选 ...
蚂蚁金服 ant design 中下载axure 菜单组件库
下载地址为:https://library.ant.design/
ant design中的栅格化系统
antd design在原12栅格系统的基础上,将整个设计区域进行24等分,Row代表行,Col代表列通过Row的gutter属性设置Col与Col之间的间隔,响应式设置 { xs:8,sm:16, ...
react学习(60)--ant design中getFieldDecorator
<From><FormItem>//JS代码书写时需要用 { } 包裹起来,不能直接写在代码块中 {getFieldDecorator('userName',{initialV ...
Ant Design中的表格中key的处理
问题描述: 在使用table标签时,指定数据源的时候必须要指定一个key值,这个值必须是唯一的,但是在我们的数据中难免会出现key值重复的问题,比如在嵌套循环中这个问题出现的频率就很高,最终影响后续操 ...
React工作60:ant design中getFieldDecorator
<From> <FormItem> //JS代码书写时需要用 { } 包裹起来,不能直接写在代码块中 { getFieldD ...

ant Design 中使用 :globa

ant Design 中使用 :global

问题描述

问题结果

ant Design 中使用 :globa相关推荐

最新文章

热门文章