传递给MUI组件的props为undefined：自定义深色背景卡片失效

你封装的DashboardCard组件虽然接收了darkBg属性，但未将其传递给内部的CustomCard组件，导致styled生成的CustomCard无法获取到darkBg值，因此控制台打印undefined，卡片背景始终显示为白色。

修改DashboardCard组件，将接收的darkBg属性传递给CustomCard：

import { Card, styled } from '@mui/material';

const CustomCard = styled(Card)<DashboardCardProps>(({ theme, darkBg }) => {
  console.log(darkBg);

  return {
    paddingLeft: '24px',
    paddingRight: '24px',
    width: '349px',
    margin: '20px',
    background: darkBg ? theme.palette.primary.dark : '#fff',
  };
});

type DashboardCardProps = {
  children: JSX.Element | JSX.Element[];
  darkBg?: boolean;
};

const DashboardCard = ({ children, darkBg }: DashboardCardProps) => {
  // 将darkBg属性传递给CustomCard
  return <CustomCard darkBg={darkBg}>{children}</CustomCard>;
};

export default DashboardCard;

修改后，CustomCard就能正确接收darkBg属性，根据传入的值切换卡片背景颜色。

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