日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

Ant?Design中使用css切換的問題及解決_React

作者：Moo_Trevor ? 更新時間： 2022-11-10 編程語言

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;
? }
}

原文鏈接：https://blog.csdn.net/weixin_45785873/article/details/126279530

欄目分類
最近更新