如何向自定义React布局组件传递sx属性？Props类型该如何定义？

1. 定义Props类型 #

从MUI的样式模块导入SxProps和Theme类型，在IProps里加一个可选的sxProps属性，类型直接用SxProps<Theme>——这是MUI官方提供的sx属性标准类型，能完全兼容样式对象、主题函数等各种sx写法。

import { SxProps, Theme } from '@mui/material/styles';
import React from 'react';

interface IProps {
  children: React.ReactNode;
  id?: string; // 按需调整可选性，根据你的实际业务场景来
  forceToBottom?: boolean;
  sxProps?: SxProps<Theme>; // 新增的自定义样式属性
}

2. 组件内使用sxProps的正确方式 #

你现在把sxProps放进sx数组的写法已经没问题——MUI的sx属性支持数组形式的样式集合，数组里的样式会按顺序合并，后面的样式会覆盖前面冲突的规则。就算父组件不传sxProps，数组里的undefined会被自动忽略，不会影响原有样式。

如果想更严谨，可以给布尔类型的forceToBottom加个默认值，避免未传值时出现异常：

const BlockLayout: React.FC<IProps> = ({
  children,
  id,
  forceToBottom = false,
  sxProps,
}) => {
  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,
        (theme) => ({
          ...(theme.palette.mode === 'dark' && {
            border: `1px solid ${lighten(theme.palette.background.paper, 0.15)}`,
          }),
        }),
      ]}
    >
      {children}
    </Box>
  );
};

3. 父组件调用示例 #

用的时候直接传符合sx语法的样式就行，不管是简单对象、依赖主题的函数还是样式数组都支持：

// 传简单样式对象
<BlockLayout sxProps={{ padding: 2, borderColor: 'red' }}>
  内容区域
</BlockLayout>

// 传依赖主题的样式函数
<BlockLayout sxProps={(theme) => ({ margin: theme.spacing(3) })}>
  内容区域
</BlockLayout>

// 传样式数组
<BlockLayout sxProps={[{ padding: 2 }, (theme) => ({ color: theme.palette.primary.main })]}>
  内容区域
</BlockLayout>

这样就不用加一堆自定义开关属性，直接通过sxProps覆盖或新增样式，完全复用MUI的sx能力，灵活度拉满。

内容的提问来源于stack exchange，提问作者Tyler