如何更改角材料按钮的宽度？ [复制]答案

【问题标题】：How can I change the width of angular material button? [duplicate]如何更改角材料按钮的宽度？ [复制]
【发布时间】：2019-04-19 10:03:41
【问题描述】：

如何更改角材料按钮的宽度？我正在使用角度 6。

【问题讨论】：

告诉我们你已经尝试过什么？
有一个简单的按钮。我想减小它的宽度
得到了答案。必须使用最小宽度重复 https://stackoverflow.com/questions/33148095/is-it-possible-to-make-an-md-button-smaller
最小宽度不适用于 8.1.1 版

【解决方案1】：

假设这是您的按钮：

<button id="myButton" mat-button color="primary">Primary</button>

您可以继续为按钮添加 id：

#myButton {
width: 150px;
}

【讨论】：

【解决方案2】：

您可以附加一个类并对其进行操作。

<button mat-raised-button class="my-class">Show</button>

然后在 CSS/SASS 文件中

.my-class{
      width: 100px!important;
      min-width: unset!important;
}

这应该确保属性被覆盖。 BR

【讨论】：

但是宽度并没有减少超过一定的限制。它只是增加但问题是减少。
关于this suggested edit of yours：请不要尝试编辑明显偏离主题的帖子。您添加的只是更多理由将其关闭为工具推荐，甚至主要基于意见。另一个问题是问题被搁置后的第一次编辑会将问题放入重新打开队列，而后续编辑不会。因此，您可以利用 OP 改进问题的机会。继续编辑，确保它们值得！
min-width 是我的问题。谢谢
最欢迎 :')
最小宽度：未设置！重要；那是关键;)

【解决方案3】：

只需添加一个样式属性（一种多样化的方法）：

  <button mat-raised-button color="primary" style="width : 10em;">Primary</button>

【讨论】：

【解决方案4】：

你可以这样写：

<button mat-raised-button>BUTTON</button>

或者在 CSS 中，没有 !important 属性：

mat-raised-button {
 width: 50px;
}

【讨论】：