CODEWITHSUNDEEP
reactjsmaterial-ui
Balazs Feher
Balazs Feher

Reputation: 11

How to deduce React styleOverrides for Material-UI components?

I'm trying to customize the color of my MUI5 TextField component. Simply overriding the primary and secondary colors is not enough, so I'm striving for more control over the colors.

The component:

<TextField
    label='Username'
    variant='outlined'
    onChange={(e) => setToken(e.target.value)}
    value={token}
    size='small'
/>

This is the theme that I use:

const theme = createTheme({
    components: {
        MuiTextField: {
            styleOverrides: {
                root: {
                    '.MuiOutlinedInput-root': {
                        '.MuiOutlinedInput-notchedOutline': {
                            borderColor: 'pink',
                        },
                        '&:hover .MuiOutlinedInput-notchedOutline': {
                            borderColor: 'pink',
                        },
                    },
                },
            },
        },
        MuiInputLabel: {
            styleOverrides: {
                root: {
                    color: 'pink',
                    '&.Mui-focused': {
                        color: 'pink',
                    },
                },
            },
        },
    },
});

These style overrides are enough to control the color of

The problem is that I haven't been able to change the border color when the TextField is active and not hovered over. This is the style that is applied on it: css-9ddj71-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused.MuiOutlinedInput-notchedOutline I tried different combinations of style overrides in the custom theme but no luck so far.

  1. Can someone tell me how to change the border color in the above case?
  2. Maybe I should build a component with more basic components if I want such fine-grained control over colors?

Upvotes: 1

Views: 499

Answers (1)

stasdes
stasdes

Reputation: 669

try this:

 styleOverrides: {
    root: {
      '&.Mui-focused': {
        '.MuiOutlinedInput-notchedOutline': {
          borderColor: 'green',
        },
      },
      '&.Mui-error': {
        '.MuiOutlinedInput-notchedOutline': {
          borderColor: 'red',
        },
      },
    },
  }

Upvotes: 1

Related Questions