Trying to figure out how to make the error handling ui of this field look like another field's error handling ui.
Note that in the second example, the error text is aligned to the left. How can I achieve this alignment without considering text color or font at the moment?
Current styles:
hr: {
border: '1px solid red'
},
errorDiv: {
align: "left",
flexDirection: 'column',
}
Code snippet implementing these styles:
<Box>
<label htmlFor="contained-button-file">
<Button
size="small"
variant={'outlined'}
color={'default'}
onClick={() => {
// eslint-disable-next-line
(uploadInputRef?.current as any)?.click();
}}
// disabled={isDisabled ? true : false}
>
{url ? 'Change Asset Bundle' : 'Add Asset Bundle'}
</Button>
</label>
{error ? (
<div className={classes.errorDiv}>
<hr className={classes.hr}></hr>
{error}
</div>
) : null}
</Box>
The Box component is enclosed in a plain div and placed within a Grid item component in the parent level.