Ant Design中使用css切换的问题及解决

更新时间：2022年09月19日 11:45:12 作者：Moo_Trevor

这篇文章主要介绍了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的hooks的用法详解
这篇文章主要介绍了react的hooks的用法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-10-10
React前端路由应用介绍
前端应用大多数是SPA（单页应用程序），也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器压力更小，所以更受欢迎。为了有效的使用单个页面来管理多页面的功能，前端路由应运而生
2022-09-09
React组件的生命周期详解
React是用于构建用户界面的JavaScript库。本文详细讲解了React的生命周期，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-03-03
react编写可编辑标题示例详解
这篇文章主要为大家介绍了react编写可编辑标题示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
减少react组件不必要的重新渲染实现方法
这篇文章主要为大家介绍了减少react组件不必要的重新渲染实现方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
ReactRouterV6如何获取当前路由参数
这篇文章主要介绍了ReactRouterV6如何获取当前路由参数问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
React实现动态轮播图的使用示例
轮播组件是常见的一种方式,用来展示图像、信息或者是广告,本文就来介绍一下React实现动态轮播图的使用示例,具有一定的参考价值,感兴趣的可以了解一下
2023-12-12
ForwardRef useImperativeHandle方法demo
这篇文章主要为大家介绍了ForwardRef useImperativeHandle方法demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
React报错之Object is possibly null的问题及解决方法
这篇文章主要介绍了React报错之Object is possibly null的问题,造成 "Object is possibly null"的错误是因为useRef()钩子可以传递一个初始值作为参数，而我们传递null作为初始值，本文给大家分享详细解决方法，需要的朋友可以参考下
2022-07-07
react的ui库antd中form表单使用SelectTree反显问题及解决
这篇文章主要介绍了react的ui库antd中form表单使用SelectTree反显问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01