Question

material-ui我想自定义它。不幸的是，我自己的风格被框架样式覆盖了。例如，当我为md-toolbar

声明样式时

md-toolbar {
    background: red;
}

此声明被材料覆盖。我添加了!important指令，它有所帮助，但我不想在任何地方使用它。我该如何以适当的方式定制材料？

Answer 1

我知道的最好的方法，不需要重新编译，sass等等：

您应该应用自定义主题：

angular.module('myApp').config(['$mdThemingProvider', function($mdThemingProvider) {
    $mdThemingProvider.theme('myAwesome')
        .primaryPalette('blue')
        .accentPalette('cyan')
        .warnPalette('red');
    $mdThemingProvider.setDefaultTheme('myAwesome');
}]);

之后元素获得class：md-myAwesome-theme所以你可以在你的css（或更少）文件中添加样式：

md-select.md-myAwesome-theme {
    margin: 0;
    padding: 0;
}

Answer 2

覆盖UI设计可能会非常痛苦。使用Angular Material，我发现创建一个单独的css文件，通常称为override-material-ui，并使用id选择器来更改样式而不是类名称，效果非常好。所以对于你的代码，它将是：

#override-toolbar {
   background: red;
}

html中的标签看起来像是：

<md-toolbar id="override-toolbar">
</md-toolbar>

显然工具栏标签可能会有更多内容，但对于覆盖样式，我发现这种方法效果最好。当你必须以相同的方式设置多个标签时，这很好。虽然内联有效地覆盖了所有内容，但稍后更改样式会很烦人。

但是，即使ID选择器不会剪切它，并且您不想处理自定义主题，也可以选择内联样式选择器。

希望这有帮助！

Answer 3

我找到了解决如何使工具栏透明化的方法。将工具栏包装在div中并为其指定类名。然后在你的CSS中，你通过你在wraping div中输入的类名访问你的工具栏。这是我的代码片段。

这是我的HTML

<section id="learn" class="navbar">
<md-toolbar layout="row" layout-align="space-between center">
    <span>
        <h3 class="md-toolbar-tools">Something</h3>
    </span>

这是我的css

.navbar md-toolbar {
background-color: transparent;
}

希望这有帮助！

Answer 4

我一直在努力解决这个问题，因为我并不想创建一个全新的手掌，而只是想为一个新的布局做一个模拟。我使用像这样的CSS内联样式，它有效！

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://selenium-ide.openqa.org/profiles/test-case">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base" href="https://www.google.com/" />
<title>New Test</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">New Test</td></tr>
</thead><tbody>
<tr>
    <td>open</td>
    <td>/?gws_rd=ssl</td>
    <td></td>
</tr>
<tr>
    <td>type</td>
    <td>id=lst-ib</td>
    <td>dsad</td>
</tr>
<tr>
    <td>click</td>
    <td>name=btnG</td>
    <td></td>
</tr>
<tr>
    <td>sendKeys</td>
    <td>//*</td>
    <td>${KEYS_F5}</td>
</tr>

</tbody></table>
</body>
</html>

Answer 5

您还可以禁用Angular素材主题：

angular.module('myApp', ['ngMaterial'])
   .config(function($mdThemingProvider) {
       $mdThemingProvider.disableTheming();
   });

Answer 6

您可以在主题页面上直接在组件上应用不同的主题：https://material.angularjs.org/#/Theming/04_multiple_themes

如果没有内置主题适用，您可以自己动手：https://material.angularjs.org/#/Theming/03_configuring_a_theme

如果您需要进行padding或margin等调整，请更新scss文件，获取自定义版本：https://material.angularjs.org/#/Theming/01_introduction

如果您确实要覆盖样式，请不要将样式直接应用于md-指令，而是深入了解指令创建的元素并为子项设置样式：

md-toolbar > h2 {
    background: red;
}

我自己的角度材料风格ui

6 个答案: