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

Question

我在用着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

Answer 1

在 Emotion 中，这是通过 处理的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