有条件地渲染材质UI样式

Question

当前正在为学校项目构建应用程序。我希望使用内联条件呈现(即条件？表达式1: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...

那么，根据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} />
}

Answer 2

对于其他来到这里的人，因为Material ui v4已经不赞成这样做了。您现在可以使用：TSS它就像一个符咒！：(