reactjs - 有条件地渲染材质 UI 样式?
问题描述
目前正在为学校项目构建应用程序。我正在寻找使用内联条件渲染(即条件?表达式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...
所以,有条件地渲染 AppBar,取决于 isPharmacist 是否为真,有什么简单的方法可以做到这一点???我试过<AppBar className={isPharmacist ? classes.pharmaNav : classes.docNav }>
了,但这似乎不起作用。任何帮助将不胜感激。
解决方案
您可以将道具传递给第一个参数,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} />
}
推荐阅读
- javascript - TypeError: Date.prototype.Method 不是函数 - 方法突然不起作用
- python - 如何使用应用程序上下文来模拟烧瓶请求
- java - MongoDb 聚合,用于基于 ids 过滤列表并将此过滤列表映射到另一个字段
- php - 如何在 Woocommerce 我的帐户页面上打印登录的用户名?
- python - 无法运行 CX_Freeze 创建的 exe
- php - 从其他数组的多级数组中查找并获取数组键
- html - 为什么粘性侧边栏不浮动
- java - 如何获得实际平均值,而不是四舍五入?
- ruby-on-rails - PG::ConnectionBad - 无法连接到服务器:Mac OS X 上的连接被拒绝
- java - Java Cipher AES 不加密整个字符串