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