有条件地渲染材质 UI 样式？

Question

目前正在为学校项目构建应用程序。我正在寻找使用内联条件渲染（即条件？表达式1：表达式2）来确定当前登录的用户类型（医生或药剂师），这应该使导航栏呈现不同的颜色......简化版本看起来像这样......

const useStyles = makeStyles({
  docNav: {
    background: 'linear-gradient(45deg, #F00000 30%, #DC281E 90%)',
  },

  pharmaNav: {
    background: 'linear-gradient(45deg, #0575E6 30%, #021B79 90%)',
  }
});

const Navbar = ({ isPharmacist }) => {
  const classes = useStyles();

    return (
      <AppBar className={classes.pharmaNav} position="static">
        <Toolbar variant="regular">
          <IconButton>
            <GitHubIcon />
          </IconButton>
        </Toolbar>
      </AppBar>
    ); //and then I also have a corresponding check statement with a similar return if the person signed in is a doctor...

因此，要根据 isPharmacist 是否为真，有条件地呈现 AppBar，有什么简单的方法可以做到这一点？？？我试过了<AppBar className={isPharmacist ? classes.pharmaNav : classes.docNav }>，但这似乎不起作用。任何帮助将不胜感激。

Answer 1

您可以将 props 传递给useStyles像这样的第一个参数：

const useStyles = makeStyles({
  navbar: {
    background: props => props.isPharmacist
      ? 'linear-gradient(45deg, #0575E6 30%, #021B79 90%)'
      : 'linear-gradient(45deg, #F00000 30%, #DC281E 90%)',
  },
});

const Navbar = (props) => {
  const classes = useStyles(props);

  return <div className={classes.navbar} />
}