如何正确覆盖 CSS 框架 (MDL) 中的样式答案

【问题标题】：How to override styles from CSS framework (MDL) correctly如何正确覆盖 CSS 框架 (MDL) 中的样式
【发布时间】：2016-09-21 06:23:21
【问题描述】：

我开始了一个新项目，并决定使用 MDL (https://getmdl.io) 作为基础。现在我想知道（实际上我找不到任何关于此的内容），您认为覆盖/扩展样式的最佳方法是什么？

以 MDL 为例，我有

.mdl-dialog {
  border: none;
  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
  width: 280px; 
}

我想摆脱阴影。

显然我不会在material.css 中覆盖/扩展它，但如果我应该在custom.css 中添加.mdl-dialog 条目，或者如果我创建一个新类（比如说.my-dialog ) 并将其添加到 DOM 元素中。

还有由 JS 添加的 DOM 元素，对于那些我不能使用自己的类名的...

也许用我自己的类名和.my-class .mdl-dialog 包装元素？

这样做的正确方法是什么？

【问题讨论】：

标签： html css frameworks

【解决方案1】：

你可以做两件事。

在您的根元素之一中定义一个 id。例如：<body id="mdl-custom">。这将优先考虑您的选择器，因为：Id > class > tag/pseudo-elements。

这样做有什么好处？您不必担心您的元素具有与 MDL 相同的优先级。

在这种情况下，CSS 文件顺序无关紧要。
在你的 custom.css 中覆盖 MDL 类，确保在 MDL 样式表之后引用你的文件。

在这种情况下，CSS 文件顺序确实很重要。

现在回到没有阴影的 mdl 对话框，您可以这样做：

 #mdl-custom .mdl-dialog { 
    box-shadow: none;
 }

【讨论】：

你能解释一下什么是MDL吗？
它是一个用于 Web 开发的简约 Material Design 库：getmdl.io

【解决方案2】：

更好的方法是在附加到页面的所有其他文件之后附加您自己的css 文件，例如custom.css。并选择您需要更改样式的类并在 custom.css 中覆盖它们。

<link relation="stylesheet" href="css/styles1.css">
<link relation="stylesheet" href="css/styles2.css">
<link relation="stylesheet" href="css/styles3.css">
<link relation="stylesheet" href="css/custom.css">

如果你包装 DOM 元素并使用自定义类，它只会让浏览器超载，需要额外的工作，比如创建 DOM 节点，然后将样式应用到它们。但是，您可以将自己的类添加到现有的 DOM 元素中并根据需要设置它们的样式。

在custom.css 中应该是

.mdl-dialog {
    box-shadow: none; // add more properties that you wants to override.
}
.your-custom-class {
    background: #f00; // or whatever styles you wants to apply
}

【讨论】：