Cible le composant de matériau imbriqué dans la définition de style JSS

Vous utilisez les accessoires de Typographie dans le mauvais sens. Les accessoires variant définissent uniquement le style appliqué au composant tandis que les accessoires component définissent quelle balise sera utilisée pour rendre ce composant.

Si vous voulez votre Composant de typographie pour être un h5:

bottomArea: {
    '& h5': {
        color: "red"
    }
}

Et puis pour le style:

<Typography variant="h5" component="h5">Bed Count</Typography>

vous pouvez utiliser withStyle pour mettre à jour les classes de composants spécifiques

vérifiez ceci API de typographie

const Typography = withStyles(() => ({
  h5: {
    color: "red",
  },
}))(MuiTypography);

export default function Types() {
  return (
    <div>
      <Box display="flex" flexDirection="column">
        <Typography variant="h1" component="span">
          1982
        </Typography>
        <Typography variant="h5" component="span">
          Bed Count
        </Typography>
      </Box>
    </div>
  );
}

En supposant que vous souhaitiez conserver comme composant, vous pouvez cibler la variante h5 en ciblant la classe CSS ajoutée par Typography code > qui est MuiTypography-h5 .

Dans la syntaxe ci-dessous, le & fait référence à la classe générée pour bottomArea puis à l'espace indique que vous ciblez .MuiTypography-h5 en tant que descendant .

import React from "react";
import Typography from "@material-ui/core/Typography";
import Box from "@material-ui/core/Box";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  bottomArea: {
    "& .MuiTypography-h5": {
      color: "red"
    }
  }
});

export default function Types() {
  const classes = useStyles();

  return (
    <div className={classes.bottomArea}>
      <Box display="flex" flexDirection="column">
        <Typography variant="h1" component="span">
          1982
        </Typography>
        <Typography variant="h5" component="span">
          Bed Count
        </Typography>
      </Box>
    </div>
  );
}