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方便,就放弃了这个做法。以后可能还是要学,到时候再看吧。

  • 相关阅读:
    iOS开发UI篇—Quartz2D使用(绘图路径)
    iOS开发UI篇—Quartz2D简单使用(三)
    iOS开发UI篇—Quartz2D使用(图片剪切)
    WordPress主题开发: 制作文章页面single.php
    Wordpress页面判断
    为WordPress某个文章添加额外的样式
    Wordpress本地伪静态设置
    Wordpress添加关键词和描述
    Wordpress制作sidebar.php
    Wordpress固定链接设置
  • 原文地址:https://www.cnblogs.com/liyinSakura/p/9447447.html
Copyright © 2011-2022 走看看