9

material-ui をカスタマイズしたい。残念ながら、私自身のスタイルはフレームワーク スタイルによって上書きされます。たとえば、 md-toolbar のスタイルを宣言するとき

md-toolbar {
    background: red;
}

この宣言はマテリアルによって上書きされます。ディレクティブを追加!importantしましたが、それは役に立ちましたが、どこでも使用したくありません。マテリアルを適切にカスタマイズするにはどうすればよいですか?

4

7 に答える 7

9

less、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;
}
于 2015-08-01T10:09:03.073 に答える
1

Angular マテリアル テーマを無効にすることもできます。

angular.module('myApp', ['ngMaterial'])
   .config(function($mdThemingProvider) {
       $mdThemingProvider.disableTheming();
   });
于 2016-10-06T13:25:41.253 に答える
1

完全に新しいパレットを作成するのではなく、レイアウトの新しい部分のモックアップを作成したかったので、これに苦労しました. このような CSS インライン スタイリングを使用したところ、うまくいきました。

<md-toolbar style="background:indigo" layout="row" layout-align="space-between center">
...
</md-toolbar>
于 2015-10-13T20:56:56.970 に答える
1

ツールバーを透明にする方法に関する回避策を見つけました。ツールバーを div で囲み、クラス名を付けます。次に、css で、ラッピング 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;
}

この助けを願っています！

于 2015-09-16T22:45:30.567 に答える
0

テーマページに表示されるように、さまざまなテーマをコンポーネントに直接適用できます: 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;
}
于 2015-03-17T14:03:13.593 に答える