React does not recognize your styled component props when using Material UI?

Problem

Have you ever encountered the warning React does not recognize the ``props-name`` prop on a DOM element? I have encountered this problem in MUI v5.x.x. This problem arise is because of styled() utility function used for creating styled components. It is a wrapper for the emotion’s or styled-components’ styled() utility function. By default, all “styled” props are forwarded to the underlying component, so React will not recognize the prop.

Solution

Create a custom wrapper function around styled() from MUI. Actually, since v5.1 of styled-components, there’s transient props. They are props prefixed with a dollar sign ($). They will not be passed to the underlying React node or rendered to the DOM element. However, emotion does not have transient props. I guess this is why MUI’s styled() utility function is not added the transient props feature.

const appStyled = (component: ComponentClass<{}, any>) => styled(component, { 
  shouldForwardProp: (prop: string) => !prop.startsWith('$') 
});

This allows you to use any underlying CSS-in-JS packages that you or material UI decides to adopt.