react中使用antd影響全域性樣式的問題

2021-10-23 20:56:41 字數 1047 閱讀 5618

如果在react腳手架中使用 ant design 這個ui框架的話，需要引入它的樣式：

import 'antd/dist/antd.css';
不過這會影響我們index.js裡面全域性樣式。

一般按antd的文件走是不是發現這個問題的，不過我半路出家，直接把antd的樣式依賴寫在index.css下面，導致我在index.css安排的全域性樣式被覆蓋了，我也是後面才改過來的。

第一種：調整包引入順序，將index.css按文件裡面說的，放到最下面。

...


//antd全部引入


import moment from


'moment'


;import


'moment/locale/zh-cn'


;import


'antd/dist/antd.css'


;//把index.css最後引入


import


'./index.css'


;moment.


locale


('zh-cn');


...
先寫一下樣式，匯出：

import styled from


"styled-components"


const ulstyled = styled.div`


ul`export
然後引入，樣式包裹根元件：

...


import


from


"./styled/home"


...reactdom.


render


(>


<


/ulstyled>


<


/react.strictmode>


<


/browserrouter>


,  document.


getelementbyid


('root'))


;

React中使用Antd元件

antd的高階配置 antd的自定義主題 在react專案中進行安裝yarn add antd或者npm i antd安裝 import react,from react import from antd 引入按鈕 import antd dist antd.css 還需要引入css樣式 目的是不用...

React使用antd元件Radio

div style radio group defaultvalue a buttonstyle solid radio button value a hangzhou radio.button radio button value b shanghai radio.button radio.gro...

react 使用antd 按需載入

2.修改package.json package.json 的配置需要做如下修改 scripts babel plugin import 是乙個用於按需載入元件 和樣式的 babel 外掛程式 原理 現在我們嘗試安裝它並修改config overrides.js檔案。yarn add babel p...