修改antd组件样式

html-css012

修改antd组件样式,第1张

工作中使用antd需要对其样式进行一些修改,一开始以为直接在组件上加入className就好,但发现在好的情况下完全不可取,问了对这个比较熟悉,恍然大悟,记录下来,映像好点

修改样式无法两种情况,全局样式修改,局部样式修改

下面我就已一个按钮组件为例子来写个demo

特点: 虽然你是在当前目录下的less或css文件修改了,但是全局生效的,建议如果有全局修改的需求,放到global.less的文件中修改,并做好注释。

如:我这边修改按钮组件的样式

注意:这里就要提到css modules的一个类名加载机制了,上面应该看到了,最外层有个类 为 lqDemo ,因为css modules 的机制是,如果你不使用它,那就不会进行加载。所以无论如果需要在外面加上一个class类,进行使用,否则仅仅引用是不会生效的

这个时候就需要用到css的作用域了

像这样嵌套在:global下就好了

哈哈哈 是不是就解决了,其实还有其它的方式,但我觉得这种方式是最好的

先贴个官网的图片

然后说说整体流程...

然后重新 npm i

再重新运行,就解决了

奉上参考资料

Vue-cli3.0配置全局less

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

Quasar(发音为/kweɪ.zɑɹ/)是MIT许可的开源框架(基于Vue),可帮助Web开发人员创建:响应式网站PWA(Progressive Web App)通过Apache Cordova构建移动APP(Android,iOS,…)多平台桌面应用程序(使用Electron)Quasar允许开发人员编写一次代码,然后使用相同的代码库同时部署为网站、PWA、Mobile App和Electron App。使用最先进的CLI设计应用程序,并提供精心编写,速度非常快的Quasar Web组件。当使用Quasar时,你不需要像Hammerjs,Momentjs或Bootstrap这样的额外重型库。它拥有这些功能,而且体积很小!