reactjs - Varför orsakar det en varning i DOM-elementet när man skickar egna props till ett MUI-stilat element?

Jag arbetar med MUI v5 i React med Typescript. Jag försöker styla en div, men får följande fel i konsolen:

"Varning: React känner inte igen openFilterDrawer-egenskapen på ett DOM-element. Om du avsiktligt vill att den ska visas i DOM som en anpassad attribut, skriv den med små bokstäver som openfilterdrawer istället. Om du av misstag skickade den från en föräldrakomponent, ta bort den från DOM-elementet."

Vad gör jag för fel?

Här är min kod:

  type ChipsContainerProps = {
    openFilterDrawer: boolean
  }

 const ChipStyled = {
    Container: styled('div')<ChipsContainerProps>(
      ({ theme, openFilterDrawer }) => ({
          //leaving out irrelevant theme code
          ...(openFilterDrawer && {
            transition: theme.transitions.create('margin', {
              easing: theme.transitions.easing.easeOut,
              duration: theme.transitions.duration.enteringScreen,
            }),
            marginLeft: 0,
            paddingLeft: '0rem',
          }),
        },        
      }),
    ),
  }

Svar #1

Problemet är att MUI vidarebefordrar openFilterDrawer-egenskapen som du skickar till den underliggande div, och eftersom openFilterDrawer inte är en giltig egenskap för div-element, visar React den varningen.

För att rensa varningen bör du skicka ett objekt som innehåller en shouldForwardProps-funktion för att filtrera egenskapen från den resulterande div. Till exempel:

const ChipStyled = {
  Container: styled("div", {
    shouldForwardProp: (prop) => prop !== "openFilterDrawer" // <-- Here
  })<ChipsContainerProps>(({ theme, openFilterDrawer }) => ({
    //leaving out irrelevant theme code
    ...(openFilterDrawer && {
      transition: theme.transitions.create("margin", {
        easing: theme.transitions.easing.easeOut,
        duration: theme.transitions.duration.enteringScreen
      }),
      marginLeft: 0,
      paddingLeft: "0rem"
    })
  }))
};

Svar #2

Ett exempel som använder MUI version 5+

export const PaperContainer = styled(Paper, {
  shouldForwardProp: prop => prop !== 'gridArea',
  name: 'PaperContainer',
})<{ gridArea: GridArea }>(({ theme, gridArea }) => ({
  gridArea,
  padding: theme.spacing(6),
  overflow: 'hidden',
}));

Relaterade artiklar