2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > 如何修改ant design mobile或者其他UI组件的全局样式

如何修改ant design mobile或者其他UI组件的全局样式

时间:2022-01-01 08:31:03

相关推荐

如何修改ant design mobile或者其他UI组件的全局样式

问题描述:

有时候你可能会遇到一些前端CSS实现上的问题,因为美工的画图与你的项目使用的UI框架的样式大有出入,所以在写页面样式的时候多多少少会让你有些头疼,那么该类问题应该如何解决呢?

原因分析:

提示:这里填写问题的分析:

这种情况跟你的美工没太接触过前端UI框架也有一定关系,因为大部分美工他们只管好看,统一化标准即可,但是前端就难受了,在紧张的开发时间里面,如果没有现成可复用的轮子,那么你就要从头开始去画轮子,等你画完这个轮子还得测这个轮子的兼容性等等,问题多到你无法想象。所以,如果修改现有轮子的样式成了快速解决前端UI界面的一大手段。


解决方案:

方法非常简单,比如我使用的是蚂蚁金服的ant design mobile的样式,我现在使用一个简单Search组件,打开网页,按下F12,选中搜索框组件查看它的CSS样式,如下图

比如你要改变搜索框的高度之类的,你可以现在网页上调试样式,一层层样式往下找,看哪个样式属性是控制你想要的内容的,找到之后回到页面对应的CSS代码里,然后添加全局覆盖样式,如下:

只要把对应的属性名丢到局部CSS里面,就可以实现覆盖原有的框架样式,如果你想整个APP都覆盖这种样式,那你就应该去项目入口处的CSS文件写这些代码,否则,就在覆盖样式位于的页面模块便携这些内容。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。