Question

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

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

因此，要有条件地呈现AppBar，取决于isPharmacist是否为true，执行此操作的简单方法可能是什么？我尝试了<AppBar className={isPharmacist ? classes.pharmaNav : classes.docNav }>，但似乎没有用。任何帮助将不胜感激。

Answer 1

您需要设置style属性，而不是className。

<AppBar style={isPharmacist ? classes.pharmaNav : classes.docNav }>

Answer 2

您可以像这样将道具传递到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} />
}

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

2 个答案: