Применить стили onHover к элементам в MuiButton

Question

Я использую стилизованные компоненты и Material UI, и я не могу понять, как добавить стили при наведении к дочерним элементам MuiButton. Я искал в Интернете и проследил за некоторыми документами, но я не могу заставить его это сделать. У меня есть настройки jsx:

<StyledMuiButton onClick={() => ()}>
  <Svg />
  <MuiTypography color={Color.gray} variant="caption">
    Text
   </MuiTypography>
</StyledMuiButton>

и стилизованный компонент настроен так:

const StyledMuiButton = styled(MuiButton)`
  && {
    & .MuiButton-label {
      flex-direction: column;
    }

    &:hover ${MuiTypography} {
      color: ${Color.primary};
    }
  }
`;

Может ли кто-нибудь указать мне правильное направление

Answer 1

Вот пример, показывающий несколько способов нацеливания элементов внутри кнопки:

import React from "react";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
import DoneIcon from "@material-ui/icons/Done";
import styled from "styled-components";

const StyledButton = styled(Button)`
  & .MuiButton-label {
    display: flex;
    flex-direction: column;
  }
  &:hover {
    color: red;
    .MuiSvgIcon-root {
      background-color: blue;
    }
    .MuiTypography-root {
      color: green;
      &:nth-of-type(2) {
        color: purple;
      }
    }
  }
`;

export default function App() {
  return (
    <div className="App">
      <Button>Default Button</Button>
      <StyledButton>Styled Button</StyledButton>
      <StyledButton>
        <DoneIcon />
        <span>Styled Button</span>
        <Typography>Typography 1</Typography>
        <Typography>Typography 2</Typography>
      </StyledButton>
    </div>
  );
}

Это использует глобальные имена классов, примененные к элементы, которые задокументированы в части CSS страницы API для каждого компонента (например, здесь представлена ​​типографская документация: https://material-ui.com/api/typography/#css). Как правило, самый верхний элемент в компоненте Material-UI может быть нацелен на MuiComponentName-root (например, MuiTypography-root для Typography).