antd 主題色


如果是自己配置的reac項目,而非官方推薦的creat-react-app或者dva-cli等阿里自己開發的腳手架去引入antd,會有兩個問題

第一,用babel-plugin-import設置style true 並不能通過less的方法引入antd 的樣式。只能自動引入css。需要手動去引入less文件導入樣式。

第二,既然無法自動按需引入less文件也就無法去改主題色,即使手動引入全局的antd,去改 primary-color 也不能生效。

   即使在loader 添加options{"modifyVars":{ "@primary-color": "#1DA57A"}},用less 的modifyVars 去修改,依然無法對antd生效。

解決方案:1.使用 react-app-rewired (一個對 create-react-app 進行自定義配置的社區解決方案)並修改 啟動配置。

     2.引入 react-app-rewire 的 less 插件 react-app-rewire-less 來幫助加載 less 樣式

如果比較笨的方法就是在node_modules 將antd提取出來,在自己的src里面修改引入

另外有其他的解決方案,可以通過antd-init 中修改

后記:把antd升級到最新穩定版 3.5.1后 在.babelrc 設置style true 竟然生效了。(原來設置style css 可以生效)但是配置less-loader 添加options主題色依然無效,奇怪的是如果在模塊里面

隨便引入一個 style 例如 import 'antd/lib/layout/style'; 主題色生效了,注釋掉則依然無效,費解。

Typescript 引入antd (react-scripts-ts-antd)

js 中用babel 引入


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM