What is the common abbreviation for ant in scientific or technical contexts?

本文共计525个文字，预计阅读时间需要3分钟。

目录 + Ant Design 使用 CSS 切换问题 + 1. 绑定一个自定义属性 + 2. CSS 模块化 + 3. Ant Design 主题方案 + 4. CSS in JS Ant Design 中 CSS 样式覆盖问题 + Ant Design CSS 切换问题 + 当想通过开关来控制主题颜色时，就““

目录

• Ant Design使用css切换问题
• 1、绑定一个自定义属性
• 2、css模块化
• 3、Ant Design主题方案
• 4、css in js
• ant design中css样式覆盖问题

Ant Design使用css切换问题

当想通过开关来控制主题颜色时，就必须控制css的变化，现就记录使用Ant Design切换主题过程中发现的一些问题。

切换主题的方法：

1、绑定一个自定义属性

通过绑定一个自定义属性，一键改变html的整体样式。但缺点也很明显，他仅适用于原生的样式(css全部由自己定义)，不适合在UI框架中使用；

function addSkin(checked) {   const html = document.getElementsByTagName('html')[0];   html.dataset.theme = checked ? 'dark' : 'light';   html.className = checked ? 'dark' : ''; }

2、css模块化

配置webpack的css模块化，通过import方式导入css，再通过xxx.style的方式来设置css。缺点是，className的命名不允许出现横杠(-)的命名方式，限制比较大，不利于后期维护。

      {         test:/\.css$/,         use: [{ loader: MiniCssExtractPlugin.loader,},           { loader: "css-loader", options: { modules:true }},           { loader: "postcss-loader"}         ]       },

3、Ant Design主题方案

Ant Design框架自带的主题方案 定制主题 - Ant Design ，缺点，不适合主题切换

 ConfigProvider.config({     theme: {       bodyBackground: 'rgb(20,20,20)',       primaryColor: '#25b864', // 全局主色     },   });

4、css in js

使用styled-components库

import styled from 'styled-components' const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; // 相当于 const Title = styled.h1(xx) const Wrapper = styled.section` padding: 4em; background: papayawhip; `; render () { return ( <Wrapper> <Title>Hello styled-components</Title> </Wrapper> ) }

ant design中css样式覆盖问题

在ant design中想要覆盖原生组件的样式，因为CSS modules 的使用会使得class的名字被重新编译而没有效果；对此我们可以使用全局css来达到目的。写法如下：

.override-ant-btn {   :global(.ant-btn) {     border-radius: 16px;   } }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。