我如何为非表单文本使用 material-ui 主题的错误样式（颜色）

Question

文档清楚地说明了对表单输入（例如文本字段）使用错误样式。但是如何在自定义元素（例如文件上传按钮的文本标签）或任何其他可能不适合预定义组件的自定义组件上使用相同的样式？

为清楚起见进行编辑：我不想只选择我喜欢的颜色并使用适当的选择器将其放入我的 css 中。我想确保我使用与主题相同的错误颜色，无论是默认的、某些导入的主题还是自定义的（如果自定义很容易，但不是 DRY，只需在 css 中使用相同的值）。

具体来说，在这个用例中，我想限制用户上传小于 100MB 的文件，如果他们选择了大于此限制的文件，则显示错误消息。我想以配置主题的错误样式显示文本，但是从material-ui docs我只能看到如何设置文本字段等预打包组件的错误属性。

所以我在这里简化了：

      <input
        accept="video/*"
        id="file-upload-button"
        type="file"
        onChange={(e) => {this.fileChanged(e);}}
      />
      <label htmlFor="file-upload-button">
        <Button variant="contained" component="span" color="default">
          Browse video
        </Button>
        <br /><small>(Max size: 100MB)</small>
      </label>

其中input标签已display: none通过 css 文件应用。还，

  fileChanged(e) {
    let file = e.target.files[0];
    let sizeMB = file.size / 2**20;
    this.setState({
      selectedFile: e.target.files[0],
      fileTooLarge: sizeMB > 100
    });
  }

如何获取主题的错误颜色以将其应用于“最大尺寸”消息或其他元素？

Answer 1

3个步骤解决您的问题：

1. 您必须使用主题提供程序将主题注入您的应用程序（适用于 v3 MUI，但现在应该与 v4 类似）。见文档。

2. 然后您可以自定义主题，例如：

const theme = createMuiTheme({
  palette: {
    error: {
      main: "#ff604f"
    }
  }
}

3. 最后，您可以通过使用withStyles()（或useStyles()例如在 v4 钩子中）将样式注入到您的组件中来使用您的自定义颜色，并在您的组件中创建您的样式 const，例如：

const styles = theme => ({
  button: {
    backgroundColor: theme.palette.error.main,
  }
}

注意：error用作调色板变量名称将覆盖默认错误颜色值。