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;
CodePudding user response:
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>
CodePudding user response:
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 className={`${classes.previewText} ${messageRead ? classes.black : ''}`}>
{latestMessageText}
</Typography>
You can use the classnames or clsx npm package to simplify the ternary condition.