如何使用 Material UI useStyles/makeStyles 有条件地渲染 CSS？

Question

I'm trying to display the latestMessageText variable as bold and black if the props meet a certain condition. The useEffect method works, an ugly solution; How do I use Material UI's useStyle hook to execute my goal. I've tried passing props to useStyle, using them inside the makeStyles function, to no effect.

import React, { useEffect, useRef } 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,
    // color: "#9CADC8",
    letterSpacing: -0.17,
    color: (messages, otherUser) => {
      if (messages.length && otherUser) {
        const lastMessage = messages[messages.length - 1];
        const { senderId, receiverHasRead } = lastMessage;
        if (senderId === otherUser.id && !receiverHasRead) {
          return 'black'
        }
        return "#9CADC8"
      }
    }
  },
  black: {
    color: 'black',
    fontWeight: 700,
  }
}));

const ChatContent = (props) => {
  const { conversation } = props;
  const { latestMessageText, otherUser, messages } = conversation;
  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;

Answer 1

I recommend here using A tiny (228B) utility for constructing className strings conditionally which is clsx .

I provided solution here.

First method with {[yourclass]: conditon} syntax:

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

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
    justifyContent: "space-between",
    marginLeft: 20,
    flexGrow: 1,
  },
  username: {
    fontWeight: "bold",
    letterSpacing: -0.2,
  },
  previewText: {
    fontSize: 12,
    color: "#9CADC8",
    letterSpacing: -0.17,
  },
  black: {
    color: 'black',
    fontWeight: 700,
  }
}));

const ChatContent = (props) => {
  const classes = useStyles();
  const typeographyEl = useRef();

  const { conversation } = props;
  const { latestMessageText, otherUser, messages } = conversation;

  const lastMessage = messages?.length && messages[messages.length - 1];
  const { senderId, receiverHasRead } = lastMessage;

  return (
    <Box className={classes.root}>
      <Box>
        <Typography className={classes.username}>
          {otherUser.username}
        </Typography>
        <Typography ref={typeographyEl} className={clsx(classes.previewText, {[classes.black]: senderId === otherUser.id && !receiverHasRead})}>
          {latestMessageText}
        </Typography>
      </Box>
    </Box>
  );
};

export default ChatContent;

Or second method with {conditon && yourstyle} syntax:

 <Typography ref={typeographyEl} 
             className={clsx(classes.previewText, {(senderId === otherUser.id && !receiverHasRead) && classes.black})}>
          {latestMessageText}
 </Typography>

Answer 2

That's not the React way of handling this sort of function. You need to get the condition in a state variable (if you expect it to change by user interaction) or a constant variable otherwise, and set the class based on that.

const [messageRead, setMessageRead] = useState(false);
useEffect(() => {
  if (messages.length) {
    const { senderId, receiverHasRead } = messages[messages.length - 1];
    setMessageRead(senderId === otherUser.id && !receiverHasRead);
  }
}, [messages, otherUser]);

JSX

<Typography ref={typeographyEl} className={classes.previewText + messageRead ? ` ${classes.black}` : ''}>
  {latestMessageText}
</Typography>

You can use the classnames or clsx npm package to simplify the ternary condition.