Align text to left/start within a div within a material ui Box

user_7134342 0
Viewed 584

I am trying to get this field's error handling uiwrong error handling layout to render like this field's error handling ui

correct error handling layout

Note that in the correct (second) ui example, the error text is shown at the left. Ignoring the text color or and text font for now - how do I make the darn text ("asset bundle url is not valid....") align to the left?

My current styles

hr: {
    border: '1px solid red'
  },
  errorDiv: {
    align: "left",
    flexDirection: 'column',
  }

and where it is used in the code

<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 is wrapped in an unstyled div. The component is wrapped in a Grid item component at the next level up.

material-ui reactjs inline-styles css html
1 Answers

Welp, I got it.

Used mui FormHelperText! (I continue to underestimate the breadth of MUI.)

import FormHelperText from '@mui/material/FormHelperText';

...

<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>
      <FormHelperText >{error}</FormHelperText>
    </div>
  ) : null}
</Box>
user_71343420
Related