AngularJS

Question

我继承了一个使用第 3 方网格 Ag-grid 的 AngularJS 项目。有一个 ag-grid-style.css 文件，其中包含以下内容：

.ag-pinned-left-header.hasCategoryCol .ag-header-cell, .ag-pinned-left-cols-viewport.hasCategoryCol .ag-row .ag-cell {
    width: calc(100% / 7) !important;
}

这对于已经在使用的网格非常有用，网格很好地分为 7 列。我的问题是我创建了新代码，也使用了 ag-grid，但我需要将新网格分成 6 列，而不是 7 列。我最终得到一个额外的空列。使用 Chrome 进行调试并进入开发人员工具，我可以看到上面的 CSS，如果我将 7 更改为 6，我的网格将完美显示。我的问题是什么是完成我想要的最简单的方法？我一直在尝试调整代码中的样式，但还没有成功。建议？

Answer 1

我只是将修改后的 CSS 添加到一个 CSS 文件中，该文件呈现在所有其他第三方库 CSS 文件之后。当您有一个 !important 发生在之后另一个 !important，第二个会覆盖第一个。因此，将 CSS 添加到您的网站应该没问题。

.ag-pinned-left-header.hasCategoryCol .ag-header-cell, .ag-pinned-left-cols-
viewport.hasCategoryCol .ag-row .ag-cell {
    width: calc(100% / 6) !important;
}

Answer 2

@Adosi 的回答是首选解决方案——CSS 毕竟指的是级联样式表。但是，如果您无法修改样式的加载顺序，以下是替代解决方案。

您可以通过将您自己的内联定义添加到元素本身来覆盖在具有 !important 属性的外部样式表中定义的规则。我在这里使用 background-color 属性进行了演示，因为它更明显。

#foo {
  background-color: pink !important;
}

<p id="foo" style="background-color: cyan !important;">This paragraph has id foo.</p>

内联样式将始终优先——例如最后加载——所以在那里定义的颜色就是显示的颜色。

请注意，这不是一个好的做法，但如果您无法在第三方资产之后加载 CSS 规则，我将其作为替代方法指出。（您可能希望记录第 3 方库的错误，因为应该谨慎使用 !important 注释，在这种情况下可能根本不用。）

AngularJS - 覆盖 CSS

AngularJS - Override CSS

css

ag-grid