在没有 !important 的情况下覆盖 CSS 文件中的内联 CSS

Question

我有一个角度组件，它style在生成的 HTML中生成内联属性。

例子 ：

<my-component></my-component>

该组件的 HTML 是：

<div id="my_component" class="class_1" style="width: 40px; height: 40px;"></div>

有没有办法覆盖my_component外部 CSS 文件的宽度/高度？我尝试了很多选择器，但总是被内联样式覆盖...

!important 正在工作，但我想知道是否还有其他方法而不是使用 !important。

Answer 1

如果我们考虑到您想覆盖宽度/高度，我们对此有不同的看法，那么是的，您可以使用 min-width/min-height 来实现：

#my_component {
  min-width:200px;
  min-height:200px;
  background:red;
}

<div id="my_component" class="class_1" style="width: 40px; height: 40px;"></div>

为了更准确，您可以添加 max-* 版本以确保您具有固定的高度/宽度：

#my_component {
  min-width:200px;
  min-height:200px;
  max-width:200px;
  max-height:200px;
  background:red;
}

<div id="my_component" class="class_1" style="width: 40px; height: 40px;"></div>