Material UI: Afficher le sous-élément au survol du parent

Question

Lorsque l'utilisateur survole un composant Card, je voudrais afficher un bouton sur ce composant qui est autrement invisible. En CSS, je ferais quelque chose comme ceci :

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

Comment puis-je reproduire cela de manière "Material-UI" ?

Toutes les astuces de Material-UI que j'ai trouvées jusqu'à présent suggèrent quelque chose comme ceci pour ajouter un style au survol, mais cela applique les styles au composant survolé et non à un autre.

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

Answer 1

Il ne s'agit pas spécifiquement de Material UI mais d'une chose spécifique à React. Vous avez besoin d'une variable d'état pour afficher/masquer votre bouton.

const App = () => {
  const [show, setShow] = useState(false);
  return (
     setShow(true)}
      onMouseOut={() => setShow(false)}>

        // some content
        {show && Click}

  );

}

Answer 2

Vous pouvez faire exactement la même chose avec CSS en utilisant createMuiTheme:

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

Donnez à votre Button à l'intérieur de votre Card la classe hidden-button et vous obtiendrez ce que vous voulez.

Vérifiez ici: https://codesandbox.io/s/mui-theme-css-hover-example-n8ou5

Answer 3

import {
  makeStyles
} from '@material-ui/core'

const useStyles = makeStyles(() => ({
  root: {
    "& .appear-item": {
      display: "none"
    },
    "&:hover .appear-item": {
      display: "block"
    }
  }
}))

export default function MakeTextAppearOnHover() {
  const classes = useStyles()
  return (

      Bonjour le monde

        Texte apparaissant Go

  )
}