React 5中如何为组件应用多个样式类？

下面几种方法都能实现你之前用makeStyles时的多样式类组合效果：

方案1：合并样式到单个styled组件里 #

如果这两个样式是固定组合使用的，直接把它们合并到同一个styled定义里即可：

import React from "react";
import { styled } from "@mui/system";

const ProfileImage = styled("img")({
  borderRadius: "50%",
  width: 256,
  height: 256,
  boxShadow: "-4px -3px 45px 21px rgba(0,0,0,0.35)"
});

const MyComponent= (props) => {
    const { data } = props;
    return (
        <ProfileImage src={data.image} alt={data.title} />
    );
};

export default MyComponent;

方案2：通过props动态控制额外样式 #

如果需要根据条件添加样式（比如仅在特定场景显示阴影），可以给styled组件传入props来灵活控制：

import React from "react";
import { styled } from "@mui/system";

const ProfileImage = styled("img")(({ hasShadow }) => ({
  borderRadius: "50%",
  width: 256,
  height: 256,
  ...(hasShadow && {
    boxShadow: "-4px -3px 45px 21px rgba(0,0,0,0.35)"
  })
}));

const MyComponent= (props) => {
    const { data } = props;
    return (
        <ProfileImage 
          src={data.image} 
          alt={data.title} 
          hasShadow={true} // 可根据业务逻辑动态传值
        />
    );
};

export default MyComponent;

方案3：用clsx组合多个独立样式类 #

如果想保持样式的独立性，像之前那样分开定义后组合，可以用clsx（MUI官方推荐的类名组合工具，能更安全处理空值场景）：

import React from "react";
import { styled } from "@mui/system";
import clsx from "clsx";

const BaseImage = styled("img")({
  borderRadius: "50%",
  width: 256,
  height: 256,
});

const ShadowStyle = styled("img")({
  boxShadow: "-4px -3px 45px 21px rgba(0,0,0,0.35)"
});

const MyComponent= (props) => {
    const { data } = props;
    return (
        <img 
          src={data.image} 
          alt={data.title} 
          className={clsx(BaseImage.className, ShadowStyle.className)}
        />
    );
};

export default MyComponent;

也可以用styled创建独立样式对象再组合：

import React from "react";
import { styled } from "@mui/system";
import clsx from "clsx";

const useStyles = styled({
  image: {
    borderRadius: "50%",
    width: 256,
    height: 256,
  },
  shadow: {
    boxShadow: "-4px -3px 45px 21px rgba(0,0,0,0.35)",
  },
});

const MyComponent= (props) => {
    const { data } = props;
    const classes = useStyles();
    return (
        <img 
          src={data.image} 
          alt={data.title} 
          className={clsx(classes.image, classes.shadow)}
        />
    );
};

export default MyComponent;

方案4：继续使用makeStyles（v5兼容） #

MUI v5并未完全移除makeStyles，你依然可以安装@mui/styles包，沿用之前的写法，适合迁移阶段不想大规模修改代码的场景：

import React from "react";
import { makeStyles } from '@mui/styles';

const useStyles = makeStyles({
  image: {
    borderRadius: "50%",
    width: 256,
    height: 256,
  },
  shadow: {
    boxShadow: "-4px -3px 45px 21px rgba(0,0,0,0.35)",
  },
});

const MyComponent = (props) => {
  const { data } = props;
  const classes = useStyles();
  return (
    <img src={data.image} className={`${classes.image} ${classes.shadow}`} alt={data.title} />
  );
};

export default MyComponent;

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