css - 如何继承/覆盖文本样式

Question

有没有办法h6在没有主题的情况下改变 reactjs/material-ui 中所有子项的样式？

我尝试了以下和其他一些：

const useStyles = makeStyles({
    someClass: {
        h6: {
            fontSize: "0.5rem !important",
        },
    }
});

function functionA() {

const classes = useStyles();

return(
    <div className={classes.someClass}>
        <Typography variant="h6">foobar</Typography>
    </div>
)
}

PS我不想为每个孩子设置一个className，因为这真的是一个很大的文本。

标签： cssreactjsmaterial-ui

Answer 1

使用& parent选择器 someClass 下的任何 h6 标签 fontsize 将增加 0.5rem

const useStyles = makeStyles({
  root: {
    "& h6": {
      fontSize: "0.5rem !important",
    },
  },
});