如何删除 AngularDart material 组件的 material-tab 中的边距

Question

我想删除 material-tab-components 的 AngularDart Material 组件。我怎样才能做到这一点？

tab_component.html

<material-tab-panel centerStrip class="tab-panel visible-desktop" [activeTabIndex]="1">
    <material-tab label="Home">
        Eager Content of Tab 1
    </material-tab>
    <material-tab label="Tab 1">
        <div class="tab-background">

        </div>
    </material-tab>
    <material-tab label="Tab 2">
        Eager Content of Tab 3
    </material-tab>
    <material-tab label="Tab 3">
        Eager Content of Tab 3
    </material-tab>
</material-tab-panel>

tab_component.scss

@import 'package:angular_components/tree/master/lib/css/material/material';
@import 'package:angular_components/tree/master/lib/material_tab/mixins';

@include tab-panel-accent-color('.tab-panel', $mat-red);
@include tab-panel-tab-strip-width('material-tab-panel[centerStrip]', 400px);

tab_component.css

material-tab-panel {
    width: 400px;
}

material-tab {
    width: 100vw;
}

.tab-background {
    height: 100vh;
    width: 100vw;
    background-color: aqua;
}

Answer 1

填充是使用 material-选项卡 class 设置的。您可以通过在 tab_component.css 中覆盖它来更改它，如下所示：

material-tab.material-tab {
  padding: 0px;
}