Question

对于在表单输入（例如文本字段）中使用错误样式，文档很清楚。但是，如何在自定义元素（例如file upload button的文本标签或可能不适合预定义组件的任何其他自定义组件）上使用相同的样式？

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

具体来说，在这种情况下，我想限制用户上传小于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>

其中input标记通过一个CSS文件应用了display: none。还有，

  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个步骤：

您必须使用主题提供程序将主题注入到您的应用程序中（适用于v3 MUI，但现在应该与v4类似）。参见doc。
然后您可以自定义主题，例如：

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

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

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

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

Answer 2

可能的副本：How to add a class with React.js?

您可以提供一个ID，然后输入：ldf

然后，如果用户上传了正确的大小：getElementById.classList.add("errorClass");

如何针对非格式文本使用Material-UI主题错误样式（颜色）

2 个答案: