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-redux中connect的装饰器用法@connect详解

    react-redux中connect的装饰器用法@connect详解

    这篇文章主要介绍了react-redux中connect的装饰器用法@connect详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • 用React实现一个类 chatGPT 的交互式问答组件的方法详解

    用React实现一个类 chatGPT 的交互式问答组件的方法详解

    这篇文章主要给大家详细介绍如何用React实现一个类 chatGPT 的交互式问答组件的方法,文中有详细的代码示例,对我们学习有一定的帮助,需要的朋友可以参考下
    2023-06-06
  • React-Native中一些常用组件的用法详解(一)

    React-Native中一些常用组件的用法详解(一)

    这篇文章主要跟大家分享了关于React-Native中一些常用组件的用法,其中包括View组件、Text组件、Touchable类组件、TextInput组件以及Image组件的使用方法,分别给出了详细的示例代码供大家参考学习,需要的朋友们下面来一起看看吧。
    2017-06-06
  • react 实现表格列表拖拽排序的示例

    react 实现表格列表拖拽排序的示例

    本文主要介绍了react 实现表格列表拖拽排序,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • 浅谈React组件在什么情况下会重新渲染

    浅谈React组件在什么情况下会重新渲染

    当我们使用React编写组件时,组件的重新渲染是一个重要的概念,本文主要介绍了React组件在什么情况下会重新渲染,具有一定的参考价值,感兴趣的可以了解一下
    2023-12-12
  • 使用react render props实现倒计时的示例代码

    使用react render props实现倒计时的示例代码

    这篇文章主要介绍了使用react render props实现倒计时的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • React Hook之使用Effect Hook的方法

    React Hook之使用Effect Hook的方法

    这篇文章主要为大家详细介绍了React 使用Effect Hook的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • react redux的原理以及基础使用讲解

    react redux的原理以及基础使用讲解

    这篇文章主要介绍了react redux的原理以及基础使用讲解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • React中实现防抖功能的两种方式小结

    React中实现防抖功能的两种方式小结

    这篇文章主要介绍了React中实现防抖功能的两种方式小结,具有很好的 参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • ahooks useVirtualList 封装虚拟滚动列表

    ahooks useVirtualList 封装虚拟滚动列表

    这篇文章主要为大家介绍了ahooks useVirtualList 封装虚拟滚动列表详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09

最新评论