When it comes to using error styles for form inputs like text fields, the documentation is straightforward. But what about applying the same style to a custom element, such as a text label for a file upload button or another unique component that doesn't align with predefined components?
To clarify: I don't want to randomly select a color and insert it into my CSS with a suitable selector. I aim to ensure consistency by utilizing the theme's error color, whether it's the default option, an imported theme, or even a customized one (in the case of a custom theme, it's relatively simple but not very DRY to repeatedly use the same value in CSS).
In this particular scenario, I wish to restrict users from uploading files larger than 100MB and exhibit an error message if they attempt to select a file exceeding this limit. Ideally, I would like to display this text in the error style defined by the current theme. However, based on the material-ui documentation, I can only find guidance on setting error properties for pre-built components such as text fields.
To simplify things:
<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>
In the above code snippet, the display: none property is applied to the input tag via a CSS stylesheet. Additionally,
fileChanged(e) {
let file = e.target.files[0];
let sizeMB = file.size / 2**20;
this.setState({
selectedFile: e.target.files[0],
fileTooLarge: sizeMB > 100
});
}
The question remains - how can I utilize the theme's error color to style the "Max Size" message or any other elements within the design?