Question

我开始了一个新项目并决定使用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中覆盖/扩展它，但如果我要在.mdl-dialog添加custom.css条目，或者我创建了新类（比如.my-dialog）并将其添加到DOM-Element。

还有一些DOM-Elements，由JS添加，对于那些我不能使用自己的类名的人......

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

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

Answer 1

我会尝试总结一下。你可以做两件事。

1.-在您的一个根元素中定义一个Id。例如：<body id="mdl-custom">。这将优先考虑您的选择器，因为：Id＆gt;课程＆gt;标签/伪元素。

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

在这种情况下，CSS文件顺序无关紧要。

覆盖custom.css中的MDL类，只需确保在MDL样式表之后引用您的文件。

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

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

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

Answer 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
}

如何正确地覆盖CSS框架（MDL）中的样式

2 个答案: