Target nested material component in JSS style definition

Question

I have this JSX layout currently

<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>

And in my styles I'm trying to change the color of the h5 Typography element

bottomArea: {
    $h5: {
        color: "red"
    }
}

I think I understand why this isn't working but is there an easy way to target that h5 variant?

Here is a codesandbox to show

https://codesandbox.io/s/material-demo-wb7ts

score 2 · Answer 1 · answered Jun 22 '20 at 14:34

Assuming that you want to retain <span> as your component, you can target the h5 variant by targeting the CSS class added by Typography which is MuiTypography-h5.

In the syntax shown below, the & refers to the class generated for bottomArea and then the space indicates targeting .MuiTypography-h5 as a 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>
  );
}

JSS Documentation: https://cssinjs.org/jss-plugin-nested/?v=v10.3.0#use--to-reference-selector-of-the-parent-rule

Related answer: How do you change a style of a child when hovering over a parent using material-ui jss styles

will this work in production mode when those classes get converted to the shortened class names? Such as `jss-101` etc. — Jordan, Jun 22 '20 at 17:50
@Jordan The Mui classes do not get shortened in production mode in v4 (at least not by default). They did get shortened in v3. — Ryan Cogswell, Jun 22 '20 at 17:51

score 0 · Answer 2 · answered Jun 22 '20 at 12:47

You are using the Typography props the wrong way. The variant props only defines the style applied to the component whereas the component props defines which tag will be used to render this component.

If you want your Typography component to be a h5:

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

And then for the styling:

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

CodeSanbox: https://codesandbox.io/s/material-demo-6i1lq?file=/demo.js

Great day !

score 0 · Answer 3 · answered Jun 22 '20 at 12:48

you can use withStyle to update the specific component classes

check this Typography API

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>
  );
}

Target nested material component in JSS style definition

3 Answers3