如何跳过应用到 ag-grid 组件的具体化 css 文件

Posted 2023-03-28

【中文标题】如何跳过应用到 ag-grid 组件的具体化 css 文件

【英文标题】：How to skip materialize css file getting applied to ag-grid components

【发布时间】：2021-02-01 19:38:35

【问题描述】：

我有一个 .cshtml 文件，其中包含 search/upload/download/save 按钮，这些按钮使用 materialize.min.css 来设置这些按钮的样式，并在同一页面中使用 ag-grid 来显示上传的网格中的文件数据。 因此，该页面同时引用了 materialize.min.css 和 ag-grids javascript 社区版文件，即 ag-grid-community.min.js。

我想选择 ag-grid 的每一行，然后将其发送到后端进行处理。所以我启用了 ag-grids 列属性checkboxselection。但不幸的是，ag-grid 中的checkbox 不起作用（即无法选中复选框），因为materialize.min.css 的CSS 被应用于checkbox 元素而不是ag-grids 复选框CSS。

我尝试了以下方法来解决这个问题，但没有任何帮助，

更改了我页面中 CSS 文件的顺序。 编写了一个单独的 CSS 文件并复制了与 ag-grids 复选框相关的 CSS，并在其每个属性中添加了 !important 标签。 尝试使用 ag-grids cellclass 属性。

根据我的项目结构，我不能为 search/upload/download/save 按钮提供单独的 CSS 文件，因为它是作为单独的框架编写的。

有没有办法绕过materialize.min.css 文件被应用到ag-grid？

【参考方案1】：

我最近遇到了同样的问题，受this answer的启发，以下对我有用。

按照上面的链接添加以下 CSS 以撤消 Materialize 格式：

[type="checkbox"].reset-checkbox,
[type="checkbox"].reset-checkbox:checked,
[type="checkbox"].reset-checkbox:not(checked) 
  opacity: 1 !important;
  position: relative !important;
  pointer-events: inherit !important;


[type="checkbox"].reset-checkbox+span::before,
[type="checkbox"].reset-checkbox+span::after,
[type="checkbox"].reset-checkbox:checked+span::before,
[type="checkbox"].reset-checkbox:checked+span::after 
  display: none !important;


[type="checkbox"].reset-checkbox+span:not(.lever) 
  padding-left: 10px !important;
  

将以下内容添加到您的 ag-grid。这会将类添加到所有复选框。它需要在滚动事件上动态调用，因为 ag-grid 使用 DOM 虚拟化。

gridOptions.onBodyScroll = function()
  var inputs = document.querySelectorAll(".ag-checkbox-input");
  for(var i = 0; i < inputs.length; i++) 
    inputs[i].classList.add('reset-checkbox');