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; } }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
react-redux中connect的装饰器用法@connect详解
这篇文章主要介绍了react-redux中connect的装饰器用法@connect详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-01-01用React实现一个类 chatGPT 的交互式问答组件的方法详解
这篇文章主要给大家详细介绍如何用React实现一个类 chatGPT 的交互式问答组件的方法,文中有详细的代码示例,对我们学习有一定的帮助,需要的朋友可以参考下2023-06-06使用react render props实现倒计时的示例代码
这篇文章主要介绍了使用react render props实现倒计时的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-12-12ahooks useVirtualList 封装虚拟滚动列表
这篇文章主要为大家介绍了ahooks useVirtualList 封装虚拟滚动列表详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-09-09
最新评论