房山网站建设怎么样,开发区招聘信息最新招聘,wordpress 加描述,手机网站素材网前言
我们在学习和使用组件库构建页面的时候#xff0c;时常会遇到这样的问题。 即#xff0c;尽管组件库已经提供了较多的功能#xff0c;来帮助我们构建自定义的效果#xff0c;但有时仍不能使我们满意。 这个时候我们就不得不修改UI库的样式#xff0c;来达到想要的状…前言
我们在学习和使用组件库构建页面的时候时常会遇到这样的问题。 即尽管组件库已经提供了较多的功能来帮助我们构建自定义的效果但有时仍不能使我们满意。 这个时候我们就不得不修改UI库的样式来达到想要的状态。 以Element-Plus为例在Vue3中主要有三种方式可以实现自定义第三方组件库的样式。
项目背景
例如我希望调节Element-Plus中的Autocomplete自动补全输入框 组件的输入框宽度但是查看文档却发现官方并没有提供这样的接口。 这个时候我就不得不手动的查看组件的HTML实现并且对样式进行调整。 首先F12来查看其HTML源码如下所示。 这时候我们可以快速发现需要调整样式的div层然后在Vue项目中通过三种方式进行调整。
实现方式
全局样式
默认的style标签中的样式就是全局样式这意味着其中的任何样式都会对整个项目生效因此需要谨慎使用。
style
.el-input__wrapper {width: 600px
}
/style全局选择器:global(
全局选择器的效果和全局样式基本一致但是它可以被用在style scoped中这样你的组件中既能够定义非全局的样式又能定义全局样式。
style scoped
:global(.el-input__wrapper) {width: 600px
}
/style深度选择器推荐
深度选择器可以用于定义子组件的专属样式不易发生冲突。因而相对于前两种定义全局样式的方式更加合适。
style scoped
:deep(.el-input__wrapper) {width: 600px
}
/style
