Element-UI默认样式改不了？怎么办

发布时间：2024-11-30 18:01

在用vue开发项目过程中，我们总是避免不了的会使用到elementUI，它里面提供的一些组件都为我们的开发带来了很大的便利，但是，当有时候我们需要使用这些组件的同时又想要修改下组件的UI样式。比如：

一个分页器，我想要修改它下图中红框区域，想把它左右边距调大

$\"\"$

找到它的类名，我们一顿操作。。。

$\"Element-UI默认样式改不了？怎么办_第1张图片\"$ $\"\"$

$\"\"$

完了发现没有变化 $\"Element-UI默认样式改不了？怎么办_第2张图片\"$

这是为什么呢？

原来是因为在Vue文件中的style标签上有一个特殊的属性：scoped。当一个style有这个标签，它的样式就只能作用于当前的Vue组件，可以使组件的样式不相互污染。

解决方案：

1. 去掉scoped，但此方法可能会造成全局污染

2. 将修改的样式放在控制全局样式css文件中

3. 写一个新的style标签（注意不要scoped），在新的标签里去修改样式

4. 样式穿透（本人经常使用）

stylus的样式穿透使用 >>>

.wrapper >>> .swiper-pagination-bullet-active {
   		background: #fff
}

sass 和 less 的样式穿透

.Userdescriptions /deep/ .ant-descriptions-item-content {
  border-color: #fff !important;
}

// 上面不起作用换下面
::v-deep .ant-switch::after {
  height: 21px;
  width: 21px;
}

Element-UI默认样式改不了？怎么办

相关推荐