zoukankan      html  css  js  c++  java
  • dvajs+antd定制主题踩坑记录

           记一下刚刚解决的问题,困扰了几周,期间困兽争斗,甚至想放弃antd组件库。终于出来了,人类科技又进步了(才怪)。

           首先我按照dva官网建立了项目。里面引入antd的各种组件,因为需要用到一个switch开关组件,但是颜色不是我想要的颜色,首先我F12查到是“.ant-switch-checked”这个class,出于我只是想改个按钮选中颜色的想法,我决定在全局class里写上新的“ant-switch-checked”来覆盖这个主题默认的按钮色,结果试了了各种:globle @import等方式都不行,加上发现load等颜色也需要修改,未来还有其他组件需要改,只好向文档低头。

           根据adtd官网的定制主题https://ant.design/docs/react/customize-theme-cn,修改了packagejson.当然是没有用的。辗转搜索发现要改.webpack,config.js。哦,改就改吧,可是dvacli创建的项目根本没有这个文件。后来翻了一下文档,看见了说要改.roadnogrc,也是没有的文件。再翻,发现dva作者更新了,把.roadnogrc迁移到了.webpackrc。所以改webpackrc可以,webpackrc里内容要改成这个样子,才能定制主题。style不能是css,要是true。

    {
        "theme": {
        "@primary-color": "#fd8249"
        },
        "extraBabelPlugins": [
             ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true}]
        ]
        
       
    }

           改了这个文件颜色是不是就能用了呢?天真!你会发现有报错:Inline JavaScript is not enabled。谷歌了一下大佬们说把less的版本改到2.x.x可行,抱着试一试的心态,重新npm,发现主题颜色真的改成功了,喜大普奔……

         改后的package.json

          中途我还尝试了antdmobile。然后发现我想要用switch组件还要引入一个rcfrom。觉得不如antd方便,就放弃了这个做法。以后可能还是要学,到时候再看吧。

  • 相关阅读:
    CodeForces 156B Suspects(枚举)
    CodeForces 156A Message(暴力)
    CodeForces 157B Trace
    CodeForces 157A Game Outcome
    HDU 3578 Greedy Tino(双塔DP)
    POJ 2609 Ferry Loading(双塔DP)
    Java 第十一届 蓝桥杯 省模拟赛 19000互质的个数
    Java 第十一届 蓝桥杯 省模拟赛 19000互质的个数
    Java 第十一届 蓝桥杯 省模拟赛 19000互质的个数
    Java 第十一届 蓝桥杯 省模拟赛十六进制转换成十进制
  • 原文地址:https://www.cnblogs.com/liyinSakura/p/9447447.html
Copyright © 2011-2022 走看看