Reactjs JSS样式定义中的目标嵌套材质组件

我目前有这个JSX布局

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

我想我理解为什么这不起作用，但是有没有一种简单的方法来瞄准

h5

变种

下面是一个代码沙盒

---

你用错了

排版
道具。
变体
道具仅定义应用于组件的样式，而
组件
道具定义将用于呈现此组件的标记

如果希望
排版
组件成为
h5
：

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

密码箱：

好极了
 你用错了
排版
道具。
变体
道具仅定义应用于组件的样式，而
组件
道具定义将用于呈现此组件的标记

如果希望
排版
组件成为
h5
：

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

密码箱：

好极了
 您可以使用
with style
来更新特定的组件类

检查这个


const排版=带有样式（（）=>({
h5：{
颜色：“红色”，
},
}))（MuiTypography）；
导出默认函数类型（）{
返回(
1982
床位数
);
}
您可以使用
with style
来更新特定的组件类

检查这个


const排版=带有样式（（）=>({
h5：{
颜色：“红色”，
},
}))（MuiTypography）；
导出默认函数类型（）{
返回(
1982
床位数
);
}
假设您想保留
作为您的组件，您可以通过定位
排版术添加的CSS类来定位
h5
变体，即
MuiTypography-h5

在下面所示的语法中，
和
表示为
底部区域
生成的类，然后空格表示将
.MuiTypography-h5
作为目标

从“React”导入React；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/Box”导入框；
从“@material ui/core/styles”导入{makeStyles}”；
const useStyles=makeStyles({
底部区域：{
“&.MuiTypography-h5”：{
颜色：“红色”
}
}
});
导出默认函数类型（）{
const classes=useStyles（）；
返回(
1982
床位数
);
}


JSS文件：

相关回答：
假设您想保留
作为组件，您可以通过定位
排版术添加的CSS类来定位
h5
变体，即
MuiTypography-h5

在下面所示的语法中，
和
表示为
底部区域
生成的类，然后空格表示将
.MuiTypography-h5
作为目标

从“React”导入React；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/Box”导入框；
从“@material ui/core/styles”导入{makeStyles}”；
const useStyles=makeStyles({
底部区域：{
“&.MuiTypography-h5”：{
颜色：“红色”
}
}
});
导出默认函数类型（）{
const classes=useStyles（）；
返回(
1982
床位数
);
}


JSS文件：

相关答案：
当这些类转换为缩短的类名时，这在生产模式下是否有效？例如
jss-101
等@Jordan在v4的生产模式下，Mui类不会缩短（至少默认情况下不会缩短）。它们在v3中确实被缩短了。当这些类被转换为缩短的类名时，在生产模式下这是否有效？例如
jss-101
等@Jordan在v4的生产模式下，Mui类不会缩短（至少默认情况下不会缩短）。它们在v3中确实变短了。
bottomArea: {
    '& h5': {
        color: "red"
    }
}

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