why is it so hard to overwrite react mui styles?

Rostyk 0
Viewed 37

When I need to change color/border-color and so on in mui I just can't do it quickly.

I have a few Fields and Select components from MUI and they all have property error={} and I just want to change border or outline color when there is an error but I can't do it. I can't remove the initial border/outline and write my own. I tried to overwrite border-color but I can't do it.

<Select
      displayEmpty
      disabled={isEditMode}
      renderValue={() => renderClientValue()}
      {...registerFormikTextField('field', formik)}
      error={!clientId}
      helperText=" "
      value={clientId || ''}
    >
      {clients.map((client) => (
        <MenuItem key={client.id} value={client.id}>
          <ListItemText title={client.email} primary={client.email} />
        </MenuItem>
      ))}
    </Select>

I tried changing .Mui-error, use makeStyles but as I understood it is deprecated in latest version. I inspected the code and couldn't find where they put border-color: red as default style when we have an error={true}

How can I do it? Why should we use mui over tailwindcss/sass when I can't easily change the styles?

react-mui material-ui reactjs
1 Answers

You can pass custom style to Select component through sx prop like this:

sx={{
    "&.Mui-error fieldset.MuiOutlinedInput-notchedOutline": {
      borderColor: "red"
    }
}}

You can take a look at this sandbox for a live working example of this approach.

Ahmet Emre Kılınç0
Related