目前正在为学校项目构建应用程序。我正在寻找使用内联条件渲染(即条件?表达式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 }>
,但这似乎不起作用。任何帮助将不胜感激。
最佳答案
您可以将 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} />
}
关于reactjs - 有条件地渲染 Material UI 样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58869138/