@mui/system -- 如何将瞬态道具传递给 styled()

我在用着import { styled } from "@mui/system";像这样：

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

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

它产生以下错误：

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

我怎样才能传递这样的道具而不让它触发这样的错误？ styled-components 有“transient-props”，可以用 $ 调用，但不能与 @mui/system 一起使用

在情感中，这是通过处理的shouldForwardProp.

这是沙箱的修改版本：

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 文档：https://mui.com/system/styled/#heading-styled-component-options-styles-component https://mui.com/system/styled/#heading-styled-component-options-styles-component