如何在单个反应组件中更改所有 Material UI Typography 组件的样式而不将 class 应用于每个元素？

Question

我正在为您在带有 Material UI 组件的 React SPA 中应用 styles 的方式而苦苦挣扎。 我感觉错过了这个概念的一些关键点。

假设我有以下Header组件：

const Header = () => (
<AppBar position="fixed" >
  <Toolbar>
    <Link component={RouterLink} to="/">
      <Typography variant="h6" noWrap>
        Home
      </Typography>
    </Link>
    <Link component={RouterLink} to="/trainings">
      <Typography variant="h6" noWrap>
        Trainings
      </Typography>
    </Link>
  </Toolbar>
</AppBar>
);

如何应用一些样式来说明Header组件中的所有Typography组件。 我知道我可以像这样使用makeStyles和useStyles钩子：

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    headerText: {
      color: 'white',
    },
  })
);

const Header: FC = () => {
  const classes = useStyles();
  return (
    <div>
      <AppBar position="fixed">
        <Toolbar>
          <Link component={RouterLink} to="/">
            <Typography className={classes.headerText} variant="h6" noWrap>
              Home
            </Typography>
          </Link>
          <Link component={RouterLink} to="/trainings">
            <Typography className={classes.headerText} variant="h6" noWrap>
              Trainings
            </Typography>
          </Link>
        </Toolbar>
      </AppBar>
    </div>
  );
};

export default Header;

但这需要我将className属性应用于我想要设置样式的每个元素。

我还提出了以下似乎可行的解决方案，它将颜色应用于根div下的所有h6元素。

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    headerText: {
      '& h6': {
        color: 'white',
      },
    },
  })
);

const Header: FC = () => {
  const classes = useStyles();
  
  return (
    <div className={classes.headerText}>
      <AppBar position="fixed">
        <Toolbar>
          <Link component={RouterLink} to="/">
            <Typography variant="h6" noWrap>
              Home
            </Typography>
          </Link>
          <Link component={RouterLink} to="/trainings">
            <Typography variant="h6" noWrap>
              Trainings
            </Typography>
          </Link>
        </Toolbar>
      </AppBar>
    </div>
  );
};

但是所有这些解决方案都感觉不太对^^

有没有办法只说'我希望这个Header组件中white所有Typography组件都具有color ？

Answer 1

您可以使用MuiThemeProvider提供主题 object 并在那里进行更改。 如果您查看文档

const theme = createMuiTheme({
  overrides: {
    // Style sheet name ⚛️
    MuiButton: {
      // Name of the rule
      text: {
        // Some CSS
        color: 'white',
      },
    },
  },
});

// ...
return (
  <ThemeProvider theme={theme}>
    <CssBaseline />
    {children}
  </ThemeProvider>
);

对于Typography ，您可以在此处找到 class 名称

更新

如果您正在寻找仅在AppBar中更新Typography的解决方案，那么您需要设置AppBar的样式。 您可以在 API 中找到您所需排版的类名（上面的链接）

const useStyles = makeStyles({
  root: {
    '& .MuiTypography-root': {
      color: 'black'
    }
  }
})

...

const classes=useStyles()
  return (
    <AppBar classes={{root: classes.root}}>
      <Typography>Hello StackBlitz!</Typography>
    </AppBar>
  );

这是一个活生生的例子