如何使用Material UI的useStyles/makeStyles实现CSS条件渲染

问题根因 #

Material UI v4 的 makeStyles 钩子仅支持传入单个对象作为参数，样式规则的回调函数接收的也只有这个对象。你现在分开传入 messages、otherUser 两个参数，导致样式回调无法拿到正确的变量值，所以逻辑不生效。

方案1：沿用makeStyles动态参数逻辑（匹配你原有思路） #

修改点： #

1. 调用 useStyles 时将所有需要的动态变量打包为一个对象传入
2. 样式规则的回调函数从传入的单个对象中解构所需变量
3. 补充 fontWeight 的动态判断逻辑，满足条件时同时设为粗体

修正后完整代码： #

import React from "react";
import { Box, Typography } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
    justifyContent: "space-between",
    marginLeft: 20,
    flexGrow: 1,
  },
  username: {
    fontWeight: "bold",
    letterSpacing: -0.2,
  },
  previewText: {
    fontSize: 12,
    letterSpacing: -0.17,
    // 从传入的对象中解构变量
    color: ({messages, otherUser}) => {
      if (messages.length && otherUser) {
        const lastMessage = messages[messages.length - 1];
        const { senderId, receiverHasRead } = lastMessage;
        return senderId === otherUser.id && !receiverHasRead ? 'black' : "#9CADC8";
      }
      return "#9CADC8";
    },
    // 补充fontWeight动态逻辑
    fontWeight: ({messages, otherUser}) => {
      if (messages.length && otherUser) {
        const lastMessage = messages[messages.length - 1];
        const { senderId, receiverHasRead } = lastMessage;
        return senderId === otherUser.id && !receiverHasRead ? 700 : 400;
      }
      return 400;
    }
  }
}));

const ChatContent = (props) => {
  const { conversation } = props;
  const { latestMessageText, otherUser, messages } = conversation;
  // 打包为单个对象传入useStyles
  const classes = useStyles({messages, otherUser});

  return (
    <Box className={classes.root}>
      <Box>
        <Typography className={classes.username}>
          {otherUser.username}
        </Typography>
        <Typography className={classes.previewText}>
          {latestMessageText}
        </Typography>
      </Box>
    </Box>
  );
};

export default ChatContent;

方案2：动态拼接className（更简洁） #

如果不想在样式规则里写太多逻辑，也可以直接在组件内判断条件，叠加预定义的black类，不需要修改原有previewText的基础样式：

// 仅修改Typography部分即可
<Typography 
  className={`${classes.previewText} ${
    messages.length && otherUser 
    && messages[messages.length-1].senderId === otherUser.id 
    && !messages[messages.length-1].receiverHasRead ? classes.black : ''
  }`}
>
  {latestMessageText}
</Typography>

内容的提问来源于stack exchange，提问作者Moon Shine