css - 覆盖 MuiCheckbox 的悬停样式

Question

目前我所有的复选框在悬停时都有这个圆圈。我想删除它

所以我去了 MuiTheme 中的覆盖：

export const MUI_THEME = createMuiTheme({
  overrides: {
    MuiCheckbox: {
      root: {
        '&:hover': {
          backgroundColor: 'transparent'
        }
      }
    },
  },

但它会产生在常规浏览器中被忽略的样式

@media (hover: none) {
  .MuiCheckbox-colorSecondary.Mui-checked:hover {
    background-color: transparent;
  }
}

如何在没有 的情况下创建覆盖@media (hover: none)？想到的唯一方法是使用创建css样式!important，但必须有一种方法 createMuiTheme

标签： cssreactjsmaterial-ui

Answer 1

你需要克服这种特殊性。我使用链接 css 类的一种技术，例如，.class.class{...}即使这意味着使用相同的类名

export const MUI_THEME = createMuiTheme({
  overrides: {
    MuiCheckbox: {
      root: {
        '&$root$root:hover': {
          backgroundColor: 'transparent'
        }
      }
    },
  },