材料尺寸按钮的尺寸不可改变（反应）

Question

我正在使用Material-UI进行React。

这是我到目前为止拥有的UI，但是我希望Submit按钮具有与Select组件相同的高度。

我尝试将height: 100%赋予按钮

    <Button
      style={{ height: "100%", width: "30%" }}
      variant="contained"
      color="primary"
    >
      Submit
    </Button>

但这并不能真正改变高度。

这是codeandbox的链接：https://codesandbox.io/embed/material-demo-nvcxk?fontsize=14&hidenavigation=1&theme=dark

Answer 1

我不确定您是否需要潜在地缩放高度，但是通常输入的高度是固定的，因此指定它确实没有错：

<Button
  style={{ "min-height": "56px", width: "30%" }}
  variant="contained"
  color="primary"
>
  Submit
</Button>

有时候没有必要让事情变得过于复杂：D

Answer 2

对于material-ui组件自定义样式

首先，请确保您正确找到了相关的官方文档material-ui button-api

在浏览器中打开开发模式，您可能会发现按钮具有以下此类

<a class="MuiButtonBase-root MuiButton-root Connect(RawComponent)-margin-38 MuiButton-contained MuiButton-containedPrimary MuiButton-fullWidth" tabindex="0" role="button" aria-disabled="false" href="..." >
  <span class="MuiButton-label">
    Your Button Name
  </span>
  <span class="MuiTouchRipple-root">
  </span>
</a>

请注意，有些类引用了文档

MuiButton-root // => Notice the `root` here

您需要做的就是向这些类添加一些样式。但是如何？有很多方法。 material-ui style solution

中也列出了所有这些内容

根据您的情况，选择一种解决方案即可。