@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 具有可以用 $ 调用但不适用于 @mui/system

的“transient-props”

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

@mui/system -- 如何将临时属性传递给 styled()

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

reactjs

material-ui