styleOverrides中伪选择器在MUI v5主题化中的应用

Question

MUI(V5)的文档给出了这个示例：

const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          // How to use pseudo-class here?
          // I've tried this but it doesn't work:
          // "&:hover": {
          //   backgroundColor: "#000"
          //  }
          fontSize: '1rem',
        },
      },
    },
  },
});

但是，如果我想在Button (或其他伪类状态)徘徊时将CSS样式添加到Button中怎么办？styleOverrides也能做到这一点吗？

Answer 1

嗨，你的代码在我的回购中运行得很好。

const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          '&:hover': {
            backgroundColor: '#000',
          },
          fontSize: '1rem',
        },
      },
    },
  },
});

但是，如果要创建主题，则还应该使用theme.pallete和其他主题选项，而不是直接在按钮中添加css颜色。

下面是我如何创建自定义梅按钮。

const myTheme = {
  ...
  components: {
    MuiButton: {
      styleOverrides: {
        root: ({ ownerState, theme }) => ({
          textTransform: 'capitalize',
          fontSize: '0.75rem',
          fontWeight: 500,
          padding: '10px 16px 10px 16px',
          // '&:hover': { 
          //   backgroundColor: theme.palette.primary.dark,
          // },  // here worked as well 
          ...(ownerState.variant === 'semicontained' && {
            color: theme.palette.primary.main,
            backgroundColor: theme.palette.primary.light,
          }),
        }),
      },
    },
  },
};

export default myTheme;