如何让 mui 按钮尺寸大于生活？ [复制]答案

【问题标题】：How to make mui button size larger than life? [duplicate]如何让 mui 按钮尺寸大于生活？ [复制]
【发布时间】：2021-06-23 08:04:54
【问题描述】：

当前 MUI 按钮支持 size 属性值如下

small
medium
large

虽然这很方便，但我希望我可以将高度和宽度传递给 style 属性并自定义大小

        <Button
          variant="contained"
          size="large"
          onClick={onDownloadButtonClick}
          style={{
            width: '30em',
            height: '40em' // call it humonguous
          }}
        >
          Download
        </Button>

知道如何实现这样的目标吗？

【问题讨论】：

你不能用style={{width,height}}做那个吗？
@NearHuscarl nope.
@AakashVerma this 方法有什么问题？
@NearHuscarl 哇，我从来没有注意到我可以在没有 px 的情况下传递值。让我试试。谢谢
@AakashVerma 默认情况下，CssProperties 中的数值使用px 单位，因此20 将转换为'20px'。只有在使用其他单位时才需要使用字符串（%，rem...）

标签： html css reactjs button material-ui

【解决方案1】：

试试这个：

 <Button style={{maxWidth: '30em', maxHeight: '40em', minWidth: '30em', minHeight: '40em'}}/>

【讨论】：

老兄，不要从stackoverflow.com/a/51039757/5924738复制。相反，请将链接分享为对我的问题的评论，以便我可以关闭我的问题。
不是这样，那个问题解决了我的答案，但如果解决了，我会关闭我的问题。

【解决方案2】：

设置 Material-UI Button 大小 ('small' | 'large') only changes font-size 和 padding 的一个按钮。如果您想通过覆盖 width 和 height 来使按钮变得超大，您可以通过在上述 Button 上内联 css 样式轻松做到这一点：

<Button variant="contained" style={{ width: 500, height: 300 }}>
  Default
</Button>

【讨论】：