头像背景颜色在material-ui v5中没有动态变化答案

【问题标题】：Avatar background color not changing dynamically in material-ui v5头像背景颜色在material-ui v5中没有动态变化
【发布时间】：2021-10-14 12:28:21
【问题描述】：

我正在尝试根据类别更改每个头像背景颜色，例如，如果类别是“工作”，那么头像颜色必须是黄色如果类别是“待办事项”，那么头像颜色必须是粉红色和很快。但是代码显示每个头像的默认灰色背景颜色。我无法更改背景颜色。

import React from "react";
import Card from "@mui/material/Card";
import CardHeader from "@mui/material/CardHeader";
import CardContent from "@mui/material/CardContent";
import { IconButton, Typography } from "@mui/material";
import { DeleteOutlined } from "@mui/icons-material";
import { makeStyles } from "@mui/styles";
import { blue, green, pink, yellow } from "@mui/material/colors";
import Avatar from "@mui/material/Avatar";

const useStyles = makeStyles({
  avatar: {
    backgroundColor: (note) => {
      if (note.category == "work") {
        return yellow[700];
      }
      if (note.category == "money") {
        return green[500];
      }
      if (note.category == "todos") {
        return pink[500];
      }
      return blue[500];
    },
  },
});

const NoteCard = ({ note, handleDelete }) => {
  const classes = useStyles(note);

  return (
    <div>
      <Card elevation={1}>
        <CardHeader
          avatar={
            <Avatar className={classes.avatar}>
              {note.category[0].toUpperCase()}
            </Avatar>
          }
          action={
            <IconButton onClick={() => handleDelete(note.id)}>
              <DeleteOutlined />
            </IconButton>
          }
          title={note.title}
          subheader={note.category}
        />
        <CardContent>
          <Typography variant="body2" color="textSecondary">
            {note.details}
          </Typography>
        </CardContent>
      </Card>
    </div>
  );
};

export default NoteCard;

video reference

【问题讨论】：

无论如何，您都应该在 MUI v5 中使用 styled 函数而不是 makeStyles。 makeStyles 是旧版 API，在新版本中不推荐使用，可能会在 v6 中移除。

标签： reactjs material-ui

【解决方案1】：

您可以使用sx prop 来创建像这样小的样式调整，例如：

定义一个记录并返回颜色的函数：

const getAvatarBgColor = ({ category }) => ({
  work: yellow[700],
  money: green[500],
  todos: pink[500],
}[category] || blue[500]);

使用函数在 sx 属性中应用颜色（注意 bgcolor 属性与 backgroundColor）：

<Avatar sx={{ bgcolor: getAvatarBgColor(note) }}>
  {note.category[0].toUpperCase()}
</Avatar>

Take a look at the example by MUI here 了解更多选项。

或者，如果您想保留makeStyles 应用样式的方式，请查看tss-react，因为它是要使用的recommended package by MUI。

【讨论】：

成功了，谢谢！

【解决方案2】：

sx prop 是定义自定义样式的快捷方式。

1.创建函数：

 const avatarBgColor = (note) => {
      if (note.category === "work") {
        return yellow[700];
      }
      if (note.category === "money") {
        return green[700];
      }
      if (note.category === "todos") {
        return pink[500];
      } else {
        return blue[500];
      }
    };

2.使用sx prop里面的函数

<Avatar sx={{ bgcolor: avatarBgColor(note) }}>
              {note.category[0].toUpperCase()}
</Avatar>

【讨论】：