web-dev-qa-db-ja.com

素材の拡張パネルangular 4

私はangular 4.4.4アプリケーションとmaterial 2.0.0-beta.12を使用していますが、マテリアルデザインのmat-expansion-panelを使用したいです。

これは私のコードです：

           <mat-expansion-panel class="parametersPanel">
                    <mat-expansion-panel-header>
                        <mat-panel-title>
                            PARAMETERS
                        </mat-panel-title>
                    </mat-expansion-panel-header>
                    <table style="width:100%">
                        <tbody>
                            <tr class="parameterListItem">
                                <td class="icon"><img src="assets/images/alert.png"></td>
                                <td class="parameterName">Parameter 1</td>
                                <td class="parameterValue">Value</td>
                                <td class="unit">unit</td>
                            </tr>                        
                        </tbody>
                    </table>
            </mat-expansion-panel>

したがって、うまく機能しますが、ブラウザからmat-expansion-panel-bodyを持つmargin: 0 24px 16px;のマージンを削除することは可能ですか？

angularmaterial-designangular-material
9
Adrien

style.cssまたはコンポーネントスタイルで、次のcssを追加する必要があります。

/deep/ .parametersPanel .mat-expansion-panel-body {
    padding: 0;
}

これは、ビューのカプセル化によるものです。詳細については、こちらをご覧ください： https://angular.io/guide/component-styles

更新：

/deep/、::ng-deepを使用して材料コンポーネントのスタイルを変更することは推奨されていません。こちらをご覧ください link 。

ただし、@angular/core^6.1.0および@angular/material^6.4.6を使用して、Angularマテリアルの拡張パネルを何も追加せずにスタイルを変更できました特定のコンポーネントのcssファイルのスタイルを単に変更できるようになったようです。

.mat-expansion-panel-body {
    padding: 0;
}

/deep/、::ng-deepの廃止の詳細については、こちらをご覧ください here 。

10
nicholaschris

の代わりに /deep/を使用する必要があります::ng-deep。これは、angularによって提供されるエイリアスです。へのサポート /deep/などは、chrome browserから既に削除されています。この例では、次のようになります。

::ng-deep .parametersPanel .mat-expansion-panel-body {
    padding: 0;
}
12
user8836607

これは100％機能します。

これをstyle.css内に追加します：

.mat-expansion-panel-content > .mat-expansion-panel-body {
  padding: 0 !important;
}
9
George C.

これは私のために働いた

::ng-deep .mat-expansion-panel-body {
 padding: 0px 0px 0px 0px;

}

それがあなたのために働くことを願っています

6
kawthar