Material UI：在父元素悬停时显示子元素

Question

当用户将鼠标悬停在Card组件上时，我想在该组件上显示一个否则不可见的按钮。在CSS中，我会做这样的事情：

.card:hover my-button {
  display: block;
}

我如何以“Material-UI”方式复制它？

到目前为止，我发现的所有 Material-UI 提示都建议像这样添加悬停样式，但这会将样式应用于悬停在其上的组件，而不是其他组件。

  '&:hover': {
    background: 'blue'
  }

Answer 1

您可以使用 createMuiTheme 对 CSS 执行完全相同的操作：

export const theme = createMuiTheme({
  overrides: {
    // For label
    MuiCard: {
      root: {
        "& .hidden-button": {
          display: "none"
        },
        "&:hover .hidden-button": {
          display: "flex"
        }
      }
    }
  }
});

给Button你的里面的Card类名hidden-button，你会得到你想要的同样的东西。

在这里检查：https ://codesandbox.io/s/mui-theme-css-hover-example-n8ou5

Answer 2

它不是特定于 Material UI 的，而是特定于 React 的东西。您需要一个状态变量来显示/隐藏按钮。

const App = () => {
  const [show, setShow] = useState(false);
  return (
    <Card
      onMouseOver={() => setShow(true)}
      onMouseOut={() => setShow(false)}>
      <CardBody>
        // some content
        {show && <Button>Click</Button>}
      </CardBody>
    </Card>
  );

}