使用基于主题的Box功能的可重用组件

问题描述

我想使用Material-UI的api创建一个可重用的组件（不使用样式化组件。）我到此为止-它几乎可以工作-但是使用主题变量的设置不起作用（例如bgcolor和填充）。我在做错什么吗？还是这不可能？

  const BigPanel = styled(Box)({
    display: 'flex',width: '100%',flexgrow: 1,bgcolor: 'background.paper',borderRadius: 10,BoxShadow:'1',p:{ xs: 4,md: 8 }
  });

解决方法

传递给styled的对象原本是CSS属性，但您混合使用CSS属性和Box道具（bgcolor，p）。即使是有效的CSS属性（display，width）也是也是有效的Box道具，因此最直接的解决方案是将所有属性都指定为道具。

处理此问题的一种方法是使用defaultProps。这使得在使用组件时通过明确指定它们（如以下示例所示）来覆盖某些道具非常容易。

import React from "react";
import Box from "@material-ui/core/Box";
import CssBaseline from "@material-ui/core/CssBaseline";
import { styled } from "@material-ui/core/styles";

const BigPanel = styled(Box)({});
BigPanel.defaultProps = {
  display: "flex",width: "100%",borderRadius: 10,flexGrow: 1,bgcolor: "background.paper",p: { xs: 4,md: 8 },boxShadow: "1"
};
export default function App() {
  return (
    <>
      <CssBaseline />
      <BigPanel>Default BigPanel</BigPanel>
      <BigPanel bgcolor="primary.main" color="primary.contrastText">
        BigPanel with explicit props
      </BigPanel>
    </>
  );
}

在上面的示例中，styled除了创建新的组件类型之外，实际上不再具有任何用途。尽管代码的确不少，但以下是一种无需使用styled即可获得相同效果的替代方法：

const BigPanel = React.forwardRef(function BigPanel(props,ref) {
  return <Box ref={ref} {...props} />;
});
BigPanel.defaultProps = {
  display: "flex",boxShadow: "1"
};