如何更改Angular Material按钮的宽度？

Question

我该如何更改Angular Material按钮的宽度？我正在使用Angular 6。

- chaucer

---

你能展示一下你已经尝试过的吗？ - devedv

有一个简单的按钮<button mat-raised-button>显示</button>。我想要减小它的宽度。 - chaucer

已经得到答案。必须使用min-width。重复问题：https://dev59.com/p1wX5IYBdhLWcg3w-Tlv - chaucer

min-width在8.1.1版本中无法正常工作。 - Newbie

Answer 1

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

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

然后在CSS / SASS文件中

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

这样可以确保属性被覆盖。BR

- Dince12

---

但是宽度在一定限制以下不会再减小。它只会增加，问题在于缩小。 - chaucer

关于您的建议编辑：请不要尝试编辑明显与主题无关的帖子。您所添加的只是更多关闭它作为工具推荐，甚至是基于主观看法的理由。另一个问题是，在问题被关闭后第一次编辑会将问题放入重新打开队列中，而随后的编辑则不会。因此，您会剥夺提问者改进问题的机会。请继续编辑，但确保它们是值得的！ - Adriaan

min-width 是我的问题。谢谢。 - Gil Epshtain

欢迎您 :') - devDan

min-width: unset!important; 这就是关键 ;) - Smaillns

Answer 2

只需添加一个样式属性（有多种方法可以实现）：

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

Stackblitz。

- SeleM

Answer 3

您可以这样写：

像这样编写：

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

或者在 CSS 中，不使用 !important 属性：

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

- Liviu Nita

Answer 4

假设这是你的按钮：

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

你可以给按钮添加id：

#myButton {
width: 150px;
}

- Nitesh Rana