材质设计组件React样式的按钮

时间:2019-06-03 15:42:59

标签: reactjs material-design

我正在将用户界面转换为使用材料设计组件(来自Bootstrap),并且遇到了各种小困难。

Bootstrap使使用主题类轻松创建辅助按钮,对比文本/大纲按钮等。

使用材质设计组件时,我使用的是Button类(在反应中-https://github.com/material-components/material-components-web-react/tree/master/packages/button),但是我无法弄清楚如何创建具有第二种颜色的按钮。

我也不知道如何更改按钮的大小(在Bootstrap中,您有btn-[sm|lg|etc])。

所以我的问题是: 如何在材质设计组件中制作一个带有辅助主题颜色的按钮以进行反应?

1 个答案:

答案 0 :(得分:0)

以下是一些带有实质性用户界面的组件演示:https://material-ui.com/components/buttons/

次要颜色:

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

尺寸:

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