Material Design Components React 风格按钮

Posted 2023-03-16

【中文标题】Material Design Components React 风格按钮

【英文标题】：Material Design Components React Styled Buttons

【发布时间】：2019-10-19 04:46:36

【问题描述】：

我正在将我们的 UI 转换为使用材料设计组件（来自 Bootstrap），并且遇到了各种小困难。

Bootstrap 使创建辅助按钮、对比文本/轮廓按钮等及其主题类变得非常容易。

在使用材料设计组件时，我使用的是 Button 类（在反应中 - https://github.com/material-components/material-components-web-react/tree/master/packages/button），但我不知道如何创建具有辅助颜色的按钮。

我也不知道如何更改按钮的大小（在 Bootstrap 中你有 btn-[sm|lg|etc]）。

所以我的问题是： 如何在 Material Design 组件中制作一个使用辅助主题颜色着色的按钮以进行反应？

【参考方案1】：

这里有一些带有材质 UI 的组件演示：https://material-ui.com/components/buttons/

辅助颜色：

<Button variant="contained" color="secondary" >
  Secondary
</Button>

尺寸：

<Button variant="contained" size="large" > //small, medium, large
  Large Button
</Button>

【讨论】：

嗯...我见过这些，但我没有使用 Material-UI。我正在使用官方的 Google 组件。也许他们没有那么发达或其他什么？

我的错....我看到了材料并立即想到了材料 UI。看起来您唯一的选择是一些自定义 CSS