I have a styled component that needs to receive props to decide how it should be styled. Looks something like this:

const StyledTypography = styled(Typography)(
  ({ myColor = "black", isLarge = false }) => ({
    "&&": {
      fontSize: isLarge ? 30 : 16,
      border: `1px solid ${myColor}`,
      margin: 10,
      color: myColor
    }
  })
);

Unfortunately isLarge causes the following warning:

Warning: React does not recognize the isLarge prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase islarge instead. If you accidentally passed it from a parent component, remove it from the DOM element.

(Same with myColor)

In another thread, I was told that all that needs to be done is to use shouldForwardProp as a function returning a boolean in the second parameter to decide what props should be passed in tot the DOM DOM:

const StyledTypography = styled(Typography, { shouldForwardProp: () => false })(
 ...
);

Unfortunately this doesn't work.

Is there anyway to do this?

Here is a working sample app with the warnings and everything: https://codesandbox.io/s/crimson-fast-qll47?file=/src/App.js

CodePudding user response：

Try this

import styled from '@emotion/styled'

const StyledTypography = styled(Typography, {
  shouldForwardProp: (prop) => prop !== "myColor" && prop !== "isLarge"
})(
  ...
);

const StyledButton = styled(Button, {
  shouldForwardProp: (prop) => prop !== "myColor"
})(
  ...
);