如何在Vue组件中覆盖css

b5lpy0ml 于 2022-12-19 发布在 Vue.js

关注(0)|答案(3)|浏览(236)

我在vue组件中有下拉列表，该元素的类是“表单控件”，它有自己的样式。我需要覆盖该类的样式。为此，我做了如下编码（在vue组件中），

<style scoped>
.form-control{
  border-radius: 50px !important;
  color: #823F98 !important;
  border: 1px solid #3FA294 !important;
}
</style>

但这个对我不起作用，那怎么破解？
谢谢大家！

3条答案

使用无作用域样式可能非常危险，尤其是像form-control这样的通用类名。
我认为在父组件中使用深层样式是一种更好的方法：

<style scoped>
>>>.form-control{
  border-radius: 50px !important;
  color: #823F98 !important;
  border: 1px solid #3FA294 !important;
}
</style>

但是如果你可以重构你的子组件，并添加一个像formControlStyle这样的 prop 和你的CSS样式，这将是避免副作用的最佳解决方案.你可以添加一个默认值给这个 prop ，它是你在子组件中的样式.

您应该删除scoped。如果您保留scoped，它将不会应用于其他组件，包括您导入的组件。
或者在app.css或app.scss中移动css。

使用深度选择器，即：：deep（. whatever样式名称），您要在当前组件中覆盖它

<style scoped>
:deep(.form-control) {
  border-radius: 50px;
  color: #823F98;
  border: 1px solid #3FA294;
}
</style>

通过这样做，你可以消除使用'！important'在每一行css代码需要overiding.
更多信息请参见Vue官方文档。