Material-UI theme override for OutlinedInput

Question

I have a custom theme in which I'd like to override the border-color of the OutlinedInput component. Anyone has any idea how to override the focused color?

export const defaultTheme = createMuiTheme({
    palette: {
        primary: {
            main: colors.primary,
            contrastText: colors.white,
        },
        ...
    },
    typography: {
        ...
    },
    overrides: {
        MuiButton: {
            outlinedPrimary: {
                color: colors.text,
            },
        },
        MuiInput: {
          underline: {
            '&::before': {
              borderBottomColor: colors.grey,
            },
            '&::after': {
              borderBottomColor: colors.greyDark,
            }
          },
        },
        MuiOutlinedInput: {
          notchedOutline: {
            borderColor: colors.grey,
          },
        }
    }
});

score 0 · Answer 1 · answered Oct 09 '20 at 11:48

Found the solution:

overrides: {
        MuiButton: {
            outlinedPrimary: {
                color: colors.text,
            },
        },
        MuiInput: {
          underline: {
            '&::before': {
              borderBottomColor: colors.grey,
            },
            '&::after': {
              borderBottomColor: colors.greyDark,
            }
          },
        },
        MuiOutlinedInput: {
          root: {
            '&$focused': {
              '& $notchedOutline': {
                borderColor: colors.greyDark,
              },
            },
          },
          notchedOutline: {
            borderColor: colors.grey,
          },
        }
    }

Material-UI theme override for OutlinedInput

1 Answers1