當變體是臨時的時，樣式化的材料UI抽屜不會打開

我創建了一個樣式MuiDrawer組件，因此我可以為組件添加一些自定義樣式。我想使用該temporary變體，但抽屜沒有打開。當我將 Drawer 變體設定為 Drawer 時permanent，確實會顯示。所以可能是openprop的傳遞導致了錯誤。當我使用 MUI 中的默認 Drawer 組件時，該temporary變體確實有效：

// 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

uj5u.com熱心網友回復：

您可以{shouldForwardProp: (prop) => prop !== 'open'}在樣式化的抽屜定義中洗掉。

代碼沙盒

uj5u.com熱心網友回復：

雖然@v1s10n_4 答案是正確的，但我會解釋更多原因。

回呼的目的shouldForwardProp是防止 HOC 創建的樣式 props 泄漏到 DOM 元素導致無效屬性錯誤。你Drawer有一個open道具，它是一個已知的道具，Dialog所以你不需要擔心道具在這里處理不當：

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} />
}

但是，如果你通過一個任意道具，是不是從DialogAPI一樣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, 來過濾掉與樣式相關的道具（而不是Dialog道具），這樣它就不會傳遞給Dialog：

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

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

標籤：反应 材质-ui

上一篇：不使用三元運算子的React組件的條件渲染

下一篇：指定axios.default.baseURL后向其他服務發送請求