yezihaohao/react-admin

Antd component style issue and related question

fengertao opened this issue · 3 comments

fengertao commented

在使用antd的Button时，发现link style的button总是显示边框，不像antd官网demo那样不显示边框。
测试代码如下

<Button type="link">Delete</Button>

跟踪调试后发现，网页中有两个.ant_btn的定义，其中一个来源于node_modules中安装的antd，另外一个来自于本项目public/theme.less。本项目的.ant_btn覆盖了antd中的.ant_btn，导致Button外观错误。

看了一下theme.less，它拷贝了antd老版本中的全部style，甚至包括去年圣诞节炸翻无数前台码农的圣诞炸弹。
https://github.com/yezihaohao/react-admin/blob/js/public/theme.less#L3067-L3076

小白有几个问题请教：

  1. 想升级所有antd相关的css为antd的新版本，Fix Button的link style等Bug。请问有没有solution或者quick workaround.

  2. 请问把antd的css拷贝到theme.less的原因是什么?

  3. 我试着把带ant字样的代码从public/theme.less中全部删除后，UI还能工作正常。除了两点：
    a.用户不能根据调色板自定义主色调了。
    b)左侧菜单区和抬头区变成黑色调了。
    a对我影响不大，但我需要把菜单区和抬头区改成蓝色。

请大神不吝指导。

yezihaohao commented

theme.less用来设计主题切换，如果不需要的话可以去掉。

升级antd的版本直接重新安装或更新antd包就行。

菜单栏的配色可能受antd的默认主题影响，看官网的配置或者可以F12打开浏览器审查排查。

fengertao commented

重新安装或更新antd包没有效果，因为antd包中的css被public/theme.less中同名css覆盖了。

yezihaohao commented

重新安装或更新antd包没有效果，因为antd包中的css被public/theme.less中同名css覆盖了。

可以运行node theme.js试试