Css 如何对非表单文本使用材质ui主题错误样式（颜色）

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

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

具体地说，在这个用例中，我想限制用户上传小于100MB的文件，如果他们选择了一个大于这个限制的文件，就会显示一条错误消息。我希望以配置主题的错误样式显示文本，但从material ui文档中，我只能看到如何设置预打包组件（如文本字段）的错误属性

这里我简化了：

      <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>

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

以下内容可能重复：

您可以给出一个ID，然后：

getElementById.classList.add（“errorClass”）

然后，如果用户上传了正确的大小：
getElementById.classList.remove（“errorClass”）
解决问题的3个步骤：

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

然后，您可以自定义主题，如下所示：

最后，您可以通过使用
withStyles（）
（或例如v4 hook中的
useStyles（）
）将样式注入组件中来使用自定义颜色，并在组件中创建样式常量，例如：

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

添加类很好，但我仍然不确定如何从主题中获得颜色的值。当然，我可以在css中选择一些红色的值和plop，但在整个材质ui中，特定的颜色由主题（或默认主题）指定。对于一致的用户体验，我应该使用完全相同的颜色，因此我想将该值与主题的错误颜色联系起来。如何访问该值？如果您知道框架用于错误颜色的类名，则可以使用该确切名称。
  fileChanged(e) {
    let file = e.target.files[0];
    let sizeMB = file.size / 2**20;
    this.setState({
      selectedFile: e.target.files[0],
      fileTooLarge: sizeMB > 100
    });
  }

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

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