Ant Design中使用css切換的問題及解決
更新時(shí)間：2022年09月19日 11:45:12 作者：Moo_Trevor
這篇文章主要介紹了Ant Design中使用css切換的問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
Ant Design使用css切換問題
當(dāng)想通過(guò)開關(guān)來(lái)控制主題顏色時(shí)，就必須控制css的變化，現(xiàn)就記錄使用Ant Design切換主題過(guò)程中發(fā)現(xià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樣式覆蓋問題
在ant design中想要覆蓋原生組件的樣式，因?yàn)镃SS modules 的使用會(huì)使得class的名字被重新編譯而沒有效果；對(duì)此我們可以使用全局css來(lái)達(dá)到目的。寫法如下：
.override-ant-btn {
? :global(.ant-btn) {
? ? border-radius: 16px;
? }
}以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了React事件處理，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
我正在處理的組件是表單的時(shí)間輸入。表單相對(duì)復(fù)雜，并且是動(dòng)態(tài)生成的，根據(jù)嵌套在其他數(shù)據(jù)中的數(shù)據(jù)顯示不同的字段。我正在用useReducer管理表單的狀態(tài)，到目前為止效果很好2022-11-11
React實(shí)現(xiàn)反向代理和修改打包后的目錄
這篇文章主要介紹了React實(shí)現(xiàn)反向代理和修改打包后的目錄方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
React?中使用?Redux?的?4?種寫法小結(jié)
這篇文章主要介紹了在?React?中使用?Redux?的?4?種寫法,Redux 一般來(lái)說(shuō)并不是必須的，只有在項(xiàng)目比較復(fù)雜的時(shí)候，比如多個(gè)分散在不同地方的組件使用同一個(gè)狀態(tài)，本文就React使用?Redux的相關(guān)知識(shí)給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-06-06
這篇文章主要介紹了react中監(jiān)聽props的改變方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
react native 文字輪播的實(shí)現(xiàn)示例
這篇文章主要介紹了react native 文字輪播的實(shí)現(xiàn)示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
本文帶領(lǐng)大家一起探討前端框架react，涉及到前端框架react相關(guān)知識(shí)，對(duì)前端框架react相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12
這篇文章主要介紹了React?echarts?組件的封裝,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06
React18從0實(shí)現(xiàn)dispatch?update流程
這篇文章主要為大家介紹了React18從0實(shí)現(xiàn)dispatch?update流程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要介紹了React Hooks之useRef獲取元素示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07