第一个材质 UI 按钮隐藏答案

【问题标题】：first material UI button hides第一个材质 UI 按钮隐藏
【发布时间】：2021-04-23 00:21:42
【问题描述】：

我正在使用这样的材质 UI 按钮

      <main className="content">
        <div className="buttons">
          <Button
            variant="contained"
          ></Button>
          <br />
          <br />
          <Button
            variant="contained"
          >
            Text
          </Button>
        </div>
      </main>

.content {
  padding-left: 280px;
  padding-top: 100px;
  background-color: white;
}

.buttons {
  padding-top: 20px;
  flex-direction: column;
  display: flex;
  width: 200px;
}

但由于某种原因，第一个按钮隐藏了，我只能在屏幕上看到它的下半部分。这是一个代码框示例：

https://codesandbox.io/s/cranky-pond-4bqgm?file=/src/page.css:0-179

【问题讨论】：

您的第一个按钮中没有文字。
你在哪里应用样式？ Material UI 有自己的使用 js 对象的 useStyle 和 makeStyle。但你也可以使用自己的 CSS。您必须在 React 中导入 css，还必须添加 className 以引用 ..buttons。否则，它应该是名为button 的原始标签。此外，Material UI 不会在按钮标签中呈现按钮，而是在包含其他 div、标签、跨度和按钮标签的 div 中呈现，每个标签都有特殊的类名称。所以我在这里看不到来自 Button 和 CSS 的链接。
确实，您没有非常基本的文字。大声笑

标签： javascript html css reactjs material-ui

【解决方案1】：

你的第一个按钮没有文字。

<Button
            variant="contained"
            color="primary"
            onClick={() => history.push("./overfitting")}
          >I'm here</Button>

【讨论】：