Passed props to MUI component are undefined

Question

I made a styled MUI card and wanted to be able to add dark background on it if the prop darkBg is passed but for some reason it doesn't work, Even though I passed darkBg below the card's background is still white. I tried to debug it by logging the prop to the console but it logs undefined.

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) => {
  return <CustomCard>{children}</CustomCard>;
};

export default DashboardCard;

On the DashboardCard below I passed darkBg={true}

import { Box, styled, Typography } from '@mui/material';
import DashboardCard from '../../core-components/DashboardCard/DashboardCard';
import DashboardCardContent from '../../core-components/DashboardCardContent/DashboardCardContent';
import DashboardCardActions from '../../core-components/DashboardCardActions/DashboardCardActions';
import DashboardCardLink from '../../core-components/DashboardCardLink/DashboardCardLink';


const TrustpilotCardContent = styled(Box)(({ theme }) => ({
  marginBottom: '24px',
  '& #emphasized': {
    fontWeight: '700'
  }
}));

const TrustpilotCard = () => {
  return (
    <DashboardCard darkBg={true}>
      <DashboardCardContent>
        <TrustpilotCardContent>
          <Typography>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam perferendis suscipit corrupti? Enim, quaerat perferendis excepturi est ipsam quos dolorem.
          </Typography>
        </TrustpilotCardContent>
      </DashboardCardContent>
      <DashboardCardActions>
        <DashboardCardLink href="#" displayArrow>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam perferendis suscipit corrupti? Enim, quaerat perferendis excepturi est ipsam quos dolorem.
        </DashboardCardLink>
      </DashboardCardActions>
    </DashboardCard>
  );
};

export default TrustpilotCard;

Answer 1

darkBkg is not being drilled down to <CustomCard> from <DashboardCard>, thus always being undefined.

Here is the problematic code:

const DashboardCard = ({ children, darkBg }: DashboardCardProps) => {
  return <CustomCard>{children}</CustomCard>;
};

To fix it, you can:

const DashboardCard = ({ children, darkBg }: DashboardCardProps) => {
  return <CustomCard darkBg={darkBg}>{children}</CustomCard>;
};