reactjs - 当变体是临时的时，样式化的 MUI 抽屉无法打开

Question

我创建了一个样式化的 MuiDrawer 组件，以便我可以为该组件添加一些自定义样式。我想使用临时变体，但抽屉未打开。当我将抽屉变量设置为永久时，抽屉确实会显示。因此，可能是 open 属性的传递导致了错误。当我使用 MUI 中的默认抽屉组件时，临时变体确实可以工作:

// demo.tsx

import * as React from 'react';
// import Drawer from '@mui/material/Drawer';
import {Drawer} from './styles';
import Button from '@mui/material/Button';

export default function TemporaryDrawer() {
  const [open, setOpen] = React.useState(false);

  const toggleDrawer = () => {
    setOpen(!open);
  };

  return (
    <>
      <Button onClick={toggleDrawer}>Toggle Drawer</Button>
      <Drawer
        variant='temporary'
        open={open}
        onClose={toggleDrawer}
      >
        <p>Drawer</p>
      </Drawer>
    </>
  );
}

// styles.tsx

import {styled} from '@mui/material';
import {Theme, CSSObject} from '@mui/material/styles';
import MuiDrawer from '@mui/material/Drawer';

const drawerWidth = 240;

const openedMixin = (theme: Theme): CSSObject => ({
  backgroundColor: 'green',
  width: drawerWidth,
  transition: theme.transitions.create('width', {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.enteringScreen,
  }),
  overflowX: 'hidden',
});

const closedMixin = (theme: Theme): CSSObject => ({
  transition: theme.transitions.create('width', {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.leavingScreen,
  }),
  overflowX: 'hidden',
  width: `calc(${theme.spacing(7)} + 1px)`,
  [theme.breakpoints.up('sm')]: {
    width: `calc(${theme.spacing(8)} + 1px)`,
  },
});

export const Drawer = styled(MuiDrawer, {shouldForwardProp: (prop) => prop !== 'open'})(
  ({theme, open}) => ({
    width: drawerWidth,
    flexShrink: 0,
    whiteSpace: 'nowrap',
    boxSizing: 'border-box',
    ...(open && {
      ...openedMixin(theme),
      '& .MuiDrawer-paper': openedMixin(theme),
    }),
    ...(!open && {
      ...closedMixin(theme),
      '& .MuiDrawer-paper': closedMixin(theme),
    }),
  }),
)

https://codesandbox.io/s/temporarydrawer-material-demo-forked-zci40?file=/demo.tsx

Answer 1

虽然 @v1s10n_4 的答案是正确的，但我会进一步解释原因。

purpose of the shouldForwardProp回调是为了防止 HOC 创建的样式 Prop 泄漏到 DOM 元素，从而导致无效属性错误。您的 Drawer 有一个 open 属性，它是 Dialog 的已知属性。所以你不需要担心这里的 prop 没有被正确处理:

const Dialog = (props) => {
  // I know this open prop, so I'm gonna extract it here
  const { open, ...other } = props

  // and do some logic with the open prop

  // and make sure it is not passed to the Component
  return <Component {...other} />
}

但是，如果您传递的任意 prop 不是来自 Dialog API ，例如 bgcolor:

<Dialog bgcolor='red'

然后它会被传递到 DOM 元素:

const Dialog = (props) => {
  const { open, ...other /* other includes the bgcolor prop */ } = props

  // logic...

  return <Component {...other} />
}

当您使用 styled 创建样式组件时:

const StyledDialog = styled(Dialog)(...)

<StyledDialog bgcolor='red'

幕后看起来像这样:

const StyledDialog = (props) => {
  const className = getStyles(props);

  return <Dialog {...props} className={className} />
}

这就是为什么你需要使用shouldForwardProp来过滤掉与样式相关的 Prop (不是Dialog Prop )，这样它就不会'不会被传递到Dialog:

const StyledDialog = (props) => {
  const { bgcolor, ...other } = props;
  const className = getStyles(props);

  // bgcolor is filtered now.
  return <Dialog {...other} className={className} />
}