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)的情况下如何创建替代？想到的唯一方法是使用!important创建CSS样式，但是createMuiTheme

中一定有一种方法

Answer 1

您需要击败这种特异性。我使用一种技术来链接css类，例如.class.class{...}，即使这意味着使用相同的类名

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

Answer 2

我在材料ui文档中发现了这一点：

const useStyles = makeStyles({
  root: {
    "&:hover": {
      backgroundColor: "transparent" <-- Note here
    }
  },
  icon: {
    borderRadius: 3,
    width: 16,
    height: 16,
    boxShadow:
      "inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)",
    backgroundColor: "#f5f8fa",
    backgroundImage:
      "linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))",
    "$root.Mui-focusVisible &": {
      outline: "2px auto rgba(19,124,189,.6)",
      outlineOffset: 2
    },
    "input:hover ~ &": {
      backgroundColor: "#ebf1f5"
    },
    "input:disabled ~ &": {
      boxShadow: "none",
      background: "rgba(206,217,224,.5)"
    }
  },
  checkedIcon: {
    backgroundColor: "#137cbd",
    backgroundImage:
      "linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))",
    "&:before": {
      display: "block",
      width: 16,
      height: 16,
      backgroundImage:
        "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
        " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
        "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
      content: '""'
    },
    "input:hover ~ &": {
      backgroundColor: "#106ba3"
    }
  }
});

jsx：

<Checkbox
      className={classes.root}
      disableRipple
      color="default"
      checkedIcon={<span className={clsx(classes.icon, classes.checkedIcon)} />}
      icon={<span className={classes.icon} />}
      inputProps={{ "aria-label": "decorative checkbox" }}
      {...props}
    />

以下是演示：https://codesandbox.io/s/material-demo-forked-cxztq?file=/demo.js:1628-1921

Answer 3

您可能忘记了将主题对象传递给MuiThemeProvider：

<MuiThemeProvider theme={MUI_THEME}>
    <Checkbox />
</MuiThemeProvider>

这是一个可行的演示：https://codesandbox.io/s/react-material-ui-override-checkbox-background-934hn?file=/src/Components/App.js:562-645

覆盖MuiCheckbox的悬停样式

3 个答案: