Vue3+Antd 修改antd主题色,配置全局css

html-css011

Vue3+Antd 修改antd主题色,配置全局css,第1张

先贴个官网的图片

然后说说整体流程...

然后重新 npm i

再重新运行,就解决了

奉上参考资料

Vue-cli3.0配置全局less

vue antd 按需加载 报错.bezierEasingMixin()

不要莽撞地使用通配符把所有的标签的margin属性和padding属性都设置为零,css reset还是个挺有技巧的事儿。当然各种框架对于cssreset的方法不太一样。但是既然你又需要用到input的默认属性,就不要最开始把所有都设为0.一般css reset的方法。你可以参考各个门户网站。至于他们取舍,也算是公说公有理婆说婆有理。没有一定之规。但是直接上来就使用*,有些鲁莽了。一般思路是将div、p、ul、li、o、tbody、tfoot、thead、fieldset、legend之类的元素的padding和margin值设为0。你应该根据你的需求和编写习惯来定

1.数组方法,元素为css的名称,可以在里面使用三目运算

<div :class="[ isOne?'one':'', 'two']">数组方法 </div>

2.对象方法,元素键名为css名称,用true和false 来控制是否显示

<div :class="{'one':isOne,'two':true}">对象方法</div>

3.直接加入,加入的内容是css名称,可以通过计算来控制显示的css,名称

<div :class="isOne?'one':'two'" >直接加入</div>

1.数组方法,元素是一个个对象,对象则是style的键值对,当然可以用三目运算控制

<div :style="[{color: 'green',fontSize: '30px'} , isOne ?{'font-weight': 'bold'}:{}]" >数组方法</div>

2.对象方法,元素键名为style名称,值为style属性值。当然可以用三目运算控制来控制是否显示对应的style属性值

<div :style="{ color: isOne ?'green':'#f00' , backgroundColor:'#f00'}" >对象方法</div>

3.直接加入,只要保证得出来的字符串是正确的即可,怎么用都可以

<div :style="(isOne ? 'color:green' : '')+ 'backgroundColor:#f00' ">直接加入</div>