MUI中为const类型定义sx接口报错，如何正确注册？

你的代码报错核心是类型不匹配：

• 你定义的Props要求对象必须包含sx属性，且sx的类型为BoxProps['sx']
• 但你给test赋值时，直接把mb:3放在了对象顶层，没有包裹在sx字段内

正确写法1：匹配你定义的Props结构 #

把样式属性放到sx字段下即可：

import { BoxProps } from '@mui/material';

interface Props {
  sx: BoxProps['sx'];
}

export const test: Props = {
  sx: { // 样式属性需包裹在sx字段中
    mb: 3,
  },
};

正确写法2：直接接收sx样式作为顶层Props（更常见场景） #

如果你的需求是让组件可以直接接收mb、color这类sx支持的样式属性作为顶层Props，而非嵌套在sx里，可以复用Material UI的内置类型：

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

// 方式1：仅定义sx属性
interface Props {
  sx?: SxProps<Theme>;
  // 可添加其他自定义属性
}

// 方式2：直接复用Box的样式相关Props
type BoxStyleProps = Pick<BoxProps, 'sx' | 'mb' | 'mt'>; // 按需挑选需要的样式属性
export const test: BoxStyleProps = {
  mb: 3,
};

如果是自定义组件需要支持sx属性，最简便的方式是让组件Props直接扩展BoxProps或SxProps，这样能自动获得所有Material UI样式属性的支持。

内容的提问来源于stack exchange，提问作者Виктория