如何在Vue组件中覆盖css

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

.表格管制{
边界半径：50px！重要；
颜色：#823F98！重要；
边框：1px实心#3FA294！重要；
}

但是这个对我不起作用。那么，如何覆盖它呢

---

谢谢大家!

您应该删除作用域。如果保留作用域，它将不会应用于其他组件，包括您导入的组件

---

或者在app.css或app.scss中移动css。

使用非范围样式可能非常危险，尤其是像

表单控件这样的通用类名

我认为在父组件中使用深度样式是一种更好的方法：

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


>>>.表格管制{
边界半径：50px！重要；
颜色：#823F98！重要；
边框：1px实心#3FA294！重要；
}

但是如果你能重构你的子组件，并在CSS样式中添加像
formControlStyle
这样的道具，那将是避免副作用的最佳解决方案。您可以在此道具中添加一个默认值，即您的子组件中的样式。
您的vue组件中是否包含另一个vue组件？如果是这样的话，“范围”样式。是的。下拉列表是另一个vue组件，我正在另一个vue组件中使用该组件。那么，有没有什么方法可以改变这些样式呢？我已经尝试过移除范围，这对我来说很有效。它会影响项目的其他部分吗？它会影响使用它的所有元素。表单控件类
<style scoped>
>>>.form-control{
  border-radius: 50px !important;
  color: #823F98 !important;
  border: 1px solid #3FA294 !important;
}
</style>