How to apply multiple classes to components on React 5?-CodePudding

Before v5, I was able to apply multiple class to the component like the following:

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;

However, since the change of styling engine(?), it seems like I can only apply a single styling like:

import React from "react";

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

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

const MyComponent= (props) => {
    const { data } = props;

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

export default MyComponent;

Would there be any possible solution to achieve the same behavior as the one above?

Thank you!

CodePudding user response：

You could use an object and just spread the properties you want to use

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

const ProfileImage1 = styled("img")({
  ...classes.image,
  ...classes.shadow
});

If you are using JS and want to benefit from type intellisense, you could use type annotation to get the hint of CSS properties

import { styled, SxProps, Theme } from "@mui/system";

/** @type{Record<string, SxProps<Theme>>} */
const classes = {
  image: {
    borderRadius: "50%",
    width: 256,
    height: 256
  },
  shadow: {
    boxShadow: "-4px -3px 45px 21px rgba(0,0,0,0.35)"
  }
};

Also, if you want to make the class conditional, styled component allows you to use prop from the component

const ProfileImage1 = styled("img")(({ shadow }) => ({
  ...classes.image,
  ...(shadow ? classes.shadow : {})
}));

export default function App() {
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        alignItems: "flex-start",
        gap: 5
      }}
    >
      <ProfileImage1 src={"https://via.placeholder.com/256"} shadow />
      <ProfileImage1 src={"https://via.placeholder.com/256"} />
    </Box>
  );
}