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

【问题标题】：Target nested material component in JSS style definitionJSS 样式定义中的目标嵌套材质组件
【发布时间】：2020-10-12 07:41:25
【问题描述】：

我目前有这个 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 Typography 元素的颜色

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

我想我明白为什么这不起作用，但有没有一种简单的方法可以定位 h5 变体？

这是一个要显示的代码框

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

【问题讨论】：

标签： reactjs material-ui jss

【解决方案1】：

假设您想保留<span> 作为您的组件，您可以通过定位Typography 添加的CSS 类来定位h5 变体，即MuiTypography-h5。

在下面显示的语法中，& 指的是为bottomArea 生成的类，然后空格表示将.MuiTypography-h5 定位为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 文档：https://cssinjs.org/jss-plugin-nested/?v=v10.3.0#use--to-reference-selector-of-the-parent-rule

【讨论】：

当这些类被转换为缩短的类名时，这会在生产模式下工作吗？如jss-101等
@Jordan Mui 类在 v4 的生产模式下不会被缩短（至少默认情况下不会）。它们在 v3 中确实被缩短了。

【解决方案2】：

您以错误的方式使用 Typography 道具。 variant 属性只定义了应用于组件的样式，而component 属性定义了将使用哪个标签来呈现该组件。

如果您希望您的Typography 组件成为h5：

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

然后是样式：

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

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

美好的一天！

【讨论】：

【解决方案3】：

可以使用withStyle更新具体的组件类

检查这个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>
  );
}

【讨论】：