Пользовательский интерфейс материала: отображение подэлемента при наведении на родительский элемент

Question

Когда пользователь наводит курсор на компонент Card, я хотел бы показать кнопку на этом компоненте, которая в противном случае невидима. В CSS я бы сделал что-то вроде этого:

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

Как мне воспроизвести это способом «Material-UI»?

Все подсказки Material-UI, которые я нашел пока что предложите что-то вроде этого, чтобы добавить стили наведения, но это применяет стили к компоненту, над которым наведен курсор, а не к другому.

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

Answer 1

Это не спецификация c для пользовательского интерфейса материала, а специфическая реакция c. вам нужна переменная состояния, чтобы показать / скрыть вашу кнопку.

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

}

Answer 2

Вы можете сделать то же самое с CSS, используя createMuiTheme:

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

Дайте Button внутри вашего Card className hidden-button, и вы получите то же самое, что Вы хотите.

Проверьте это здесь: https://codesandbox.io/s/mui-theme-css-hover-example-n8ou5