Angular 材料 11：具有外观轮廓的 mat-form-field 以在整个项目中具有自定义的边界半径

Posted 2023-02-22

【中文标题】Angular 材料 11：具有外观轮廓的 mat-form-field 以在整个项目中具有自定义的边界半径

【英文标题】：Angular material 11 : mat-form-field with appearance outline to have customized border radius throughout the project

【发布时间】：2021-07-06 04:37:39

【问题描述】：

我开始使用 Material 组件在 Angular 11 上创建一个新项目。

我们如何自定义样式组件，例如输入、按钮、卡片等。 设计更多 w.r.t 样式的组件（尖角/圆角/圆角边框等），而不仅仅是颜色或排版。

【问题讨论】：

您将不得不在开发者工具中摆弄 css，然后在全局 css 文件中使用适当的选择器保存 css 更改

【参考方案1】：

在你的angular.json 添加

"styles": [
  "src/styles.css"
],

然后使用正确的选择器为角材质组件添加样式，就像添加任何其他元素一样：

例子：

button.mat-raised-button 
 border-radius: 50% !important;