Question

我使用material 2.0.0-beta.12使用棱角分明的4.4.4应用程序，我希望使用材质设计中的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;中的边距？

Answer 1

在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 Material的扩展面板的样式，而无需添加任何特定内容。您现在可以简单地更改组件css文件中的样式。所以这应该有效：

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

您可以在此处阅读有关/deep/，::ng-deep here弃用的详细信息。

Answer 2

而不是/deep/您应该使用::ng-deep，这是由angular提供的别名。已从Chrome浏览器中删除对/deep/等的支持。所以在你的例子中：

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

Answer 3

这100％有效。

在style.css中添加：

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

Answer 4

这个为我工作

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

}

我希望这对你有用

Answer 5

::ng-deep .mat-expansion-panel-body {
    padding: 0 !important;
}

Answer 6

如果将其添加到主要styles.scss中，则它可以工作（不适用于组件样式级别）

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

Answer 7

下面的代码在添加到组件css文件中后将起作用

:host {
  ::ng-deep {
    .mat-expansion-panel-spacing {
      margin: 0px 0 !important;
    }
  }
}

Answer 8

最简单和最安全的方法是将其包含在您的项目全局 style.scss 中

import { useSelector, useDispatch } from "react-redux";
import { increment, decrement, get_posts } from "./action";
function App() {
  const counter = useSelector((state) => state.counter);
  const isLogged = useSelector((state) => state.isLogged);
  const dispatch = useDispatch();
  return (
    <div className="App">
      <h1>Counter {counter}</h1>
      <button onClick={() => dispatch(increment(5))}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(get_posts())}>Get API</button>
      {isLogged ? <h3>Valuable info I shouldnt</h3> : "NOt logged"}
    </div>
  );
}

export default App;

}

app-instruction => component.ts 文件中的组件选择器。
mat-expansion-panel => mat-expansion-panel 选择器。
.trigger-panel => 是我包含在 mat-expansion-panel 中的一个 css 类，用于在 component.html 文件中只选择这个。

Answer 9

对于@ angular /材料版本+10

您需要将Xamarin-50.png属性添加到您的@Component装饰器中

encapsulation: ViewEncapsulation.None

然后这将起作用

@Component({
  selector: '...',
  ...
  encapsulation: ViewEncapsulation.None
})
export class myApp{}

请注意，如@nicholaschris所说，:: ng-deep和/ deep /不适用于新版本的angular / material

Answer 10

您可以轻松删除父填充。

<div class="removePadding">
   <mat-list-item *ngFor="let item of item.children" class="testingSmall">
      <h3 matLine>{{item.label}}</h3>
   </mat-list-item>
</div>

.removePadding{
   margin: 0 -24px -16px;
}

材料角4的扩展面板

10 个答案:

对于@ angular /材料版本+10