reactjs - 将 sx prop 传递给自定义组件

Question

我有一个用作布局组件的组件，几乎在所有情况下它都工作得很好，但是有一两个地方我需要能够调整样式，并且我希望能够只需传递我需要的确切样式即可做到这一点，而不是添加一些自定义 Prop 来打开或关闭它们。

该组件如下所示:

const BlockLayout: React.FC<IProps> = ({
  children,
  id,
  forceToBottom,
  sxProps, // <--- What I want to add
}) => {
  return (
    <Box
      id={id}
      sx={[
        {
          backgroundColor: (theme) => theme.palette.background.paper,
          mt: forceToBottom ? 'auto' : 1,
          borderRadius: 0.5,
          display: 'flex',
          border: '1px solid rgba(0, 0, 0, 0.1)',
          flexWrap: 'wrap-reverse',
        },
        sxProps, //<--- How I could use it? 
        (theme) => ({
          ...(theme.palette.mode === 'dark' && {
            border: `1px solid ${lighten(
              theme.palette.background.paper,
              0.15
            )}`,
          }),
        }),
      ]}
    >
      {children}
    </Box>
  )
}

如何做到这一点？ Prop 需要什么类型？

Answer 1

在 the documentation他们只是将类型转换为 const。

您可以使用spread operator按如下方式添加它们:

},
sxProps && ...sxProps,
(theme) => ({