如何用浏览器默认 CSS 覆盖 Materialize CSS？答案

【问题标题】：How to overwrite Materialize CSS with browser default CSS?如何用浏览器默认 CSS 覆盖 Materialize CSS？
【发布时间】：2017-01-23 03:03:07
【问题描述】：

我正在为我的 UI 使用 Javascript、AngularJS 和 Materialize CSS 制作一个 Web 应用程序。到目前为止，Materialize CSS 一直是一个很棒的工具，但我遇到了一个问题。

我想为我的表使用 Angular-Datatables，但我不能，因为它们是由 Materialize CSS 操作的。你甚至不需要写什么特别的东西，你只需要写<table>，你就已经在使用Materialize的表了。

所以我的问题是：我如何继续对其他所有内容使用 Materialize CSS，但使用默认表的 CSS 以便我可以使用 Angular-Datatables？

谢谢。

编辑：

这是我的 HTML 代码：

<table>
    <thead>
        <tr>
            <th style="width:15%"><b>ID</b></th>
            <th style="width:40%"><b>Title</b></th>
            <th style="width:15%"><b>Start Date</b></th>
            <th style="width:20%"><b>End Date</b></th>
            <th style="width:10%"><b>Type</b></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="task in tasks track by $index">
            <td>{{task.id}}</td>
            <td>{{task.title}}</td>
            <td>{{task.start_day}} {{task.start_time}}</td>
            <td>{{task.end_day}} {{task.end_time}}</td>
            <td>{{task.type}}</td>
        </tr>
    </tbody>
</table>

此代码生成下表：

使用 angular-datatables，如果您关注他们的网站，您只需将 <table> 标签更改为 <table datatable="">，如下所示：

【问题讨论】：

您使用的是 SASS 还是预构建的 Materialise？如果您使用的是 SASS，只需删除任何样式。

如果您使用的是预构建的 Materialize 和 Angular-Datatables，我假设您在 <head> 的某处调用数据表 CSS，请确保您在 Angular-Materialize CSS 之后调用它。

请发布您的代码示例以获得更明确的答案。

我想我使用的是预先构建的 Materialise，我当然没有使用 SASS 版本。是的，我在 Materialize CSS 之后加载了 angular-datatables CSS。我的代码只是纯 HTML 中的基本表格。但是，当您包含 Materialize CSS 时，该表会自动成为 Materialize 中的表。但是 angular-datatables 应该与正常的默认表一起使用。当您将角度数据表与 Materialize 表一起使用时，它会变得一团糟。

@RichardHowell 检查我的编辑以获取我的代码和问题的图像。

标签： javascript angularjs html-table angular-datatables

【解决方案1】：

你有三个选择：

1.) 识别 Materialize 添加的违规规则并覆盖它们以匹配您在自己的样式表中所需的样式

2.) 使用未缩小版本的 Materialize 并删除有问题的样式

3.) 从 Materialize 源代码中删除任何表格样式并自己编译 SASS（https://prepros.io/ 这应该可以编译您的 SASS）

【讨论】：