@mui/system -- how to pass transient props to styled()

Question

I'm using import { styled } from "@mui/system" ; like so:

const Column = styled("div")<ColumnProps>`
  background: ${(props) => props.backgroundColor ?? "blue"};
`;

export default function App() {
  return (
    <div>
      <Column backgroundColor={"green"}>column</Column>
    </div>
  );

and it is producing the following error:

Warning: React does not recognize the `backgroundColor` prop on a DOM element.

how can I pass a prop like this without having it trigger such an error? styled-components has "transient-props' that can be invoked with $ but that does not work with @mui/system

Answer 1

In Emotion, this is handled via shouldForwardProp .

Here's a modified version of your sandbox:

import { styled } from "@mui/system";

type ColumnProps = {
  backgroundColor?: string;
};

const Column = styled("div", {
  shouldForwardProp: (prop) => prop !== "backgroundColor"
})<ColumnProps>`
  background: ${(props) => props.backgroundColor ?? "blue"};
`;

export default function App() {
  return (
    <div>
      <Column backgroundColor={"green"}>column</Column>
    </div>
  );
}

MUI documentation: https://mui.com/system/styled/#heading-styled-component-options-styles-component

Answer 2

I use utility function for it, so I always type prop names correctly:

export const shouldForwardProp = <CustomProps extends Record<string, unknown>>(
  props: Array<keyof CustomProps>,
  prop: PropertyKey,
): boolean => !props.includes(prop as string);

const MyComponent = styled('div', {
  shouldForwardProp: (prop) => shouldForwardProp<MyComponentProps>(['isDisabled', 'bgColor'], prop),
})<MyComponentProps>(({ theme, isDisabled, size, bgColor }) => ({
...