Ant Design中使用css切換的問題及解決
更新時間：2022年09月19日 11:45:12 作者：Moo_Trevor
這篇文章主要介紹了Ant Design中使用css切換的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Ant Design使用css切換問題
當(dāng)想通過開關(guān)來控制主題顏色時，就必須控制css的變化，現(xiàn)就記錄使用Ant Design切換主題過程中發(fā)現(xiàn)的一些問題。
切換主題的方法：
1、綁定一個自定義屬性
通過綁定一個自定義屬性，一鍵改變html的整體樣式。但缺點(diǎn)也很明顯，他僅適用于原生的樣式(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方式導(dǎo)入css，再通過xxx.style的方式來設(shè)置css。缺點(diǎn)是，className的命名不允許出現(xiàn)橫杠(-)的命名方式，限制比較大，不利于后期維護(hù)。
? ? ? {
? ? ? ? test:/\.css$/,
? ? ? ? use: [{ loader: MiniCssExtractPlugin.loader,},
? ? ? ? ? { loader: "css-loader", options: { modules:true }},
? ? ? ? ? { loader: "postcss-loader"}
? ? ? ? ]
? ? ? },3、Ant Design主題方案
Ant Design框架自帶的主題方案 定制主題 - Ant Design ，缺點(diǎn)，不適合主題切換
?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;
`;
// 相當(dāng)于 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中想要覆蓋原生組件的樣式，因?yàn)镃SS modules 的使用會使得class的名字被重新編譯而沒有效果；對此我們可以使用全局css來達(dá)到目的。寫法如下：
.override-ant-btn {
? :global(.ant-btn) {
? ? border-radius: 16px;
? }
}以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
react-redux中connect的裝飾器用法@connect詳解
這篇文章主要介紹了react-redux中connect的裝飾器用法@connect詳解,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
用React實(shí)現(xiàn)一個類 chatGPT 的交互式問答組件的方法詳解
這篇文章主要給大家詳細(xì)介紹如何用React實(shí)現(xiàn)一個類 chatGPT 的交互式問答組件的方法，文中有詳細(xì)的代碼示例，對我們學(xué)習(xí)有一定的幫助,需要的朋友可以參考下2023-06-06
這篇文章主要跟大家分享了關(guān)于React-Native中一些常用組件的用法，其中包括View組件、Text組件、Touchable類組件、TextInput組件以及Image組件的使用方法，分別給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，需要的朋友們下面來一起看看吧。2017-06-06
react?實(shí)現(xiàn)表格列表拖拽排序的示例
本文主要介紹了react?實(shí)現(xiàn)表格列表拖拽排序，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
當(dāng)我們使用React編寫組件時,組件的重新渲染是一個重要的概念,本文主要介紹了React組件在什么情況下會重新渲染,具有一定的參考價值,感興趣的可以了解一下2023-12-12
使用react render props實(shí)現(xiàn)倒計(jì)時的示例代碼
這篇文章主要介紹了使用react render props實(shí)現(xiàn)倒計(jì)時的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要為大家詳細(xì)介紹了React 使用Effect Hook的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要介紹了react?redux的原理以及基礎(chǔ)使用講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
React中實(shí)現(xiàn)防抖功能的兩種方式小結(jié)
這篇文章主要介紹了React中實(shí)現(xiàn)防抖功能的兩種方式小結(jié),具有很好的 參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
ahooks useVirtualList 封裝虛擬滾動列表
這篇文章主要為大家介紹了ahooks useVirtualList 封裝虛擬滾動列表詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09