概述的Material-UI主题覆盖

Question

我有一个自定义theme，在其中我想覆盖border-color组件的OutlinedInput。任何人都知道如何覆盖focused颜色吗？

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,
          },
        }
    }
});

Answer 1

找到了解决方案：

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,
          },
        }
    }