MUI V5 变体覆盖

Question

我正在尝试添加到 MUIPaper 中的变体，但我不确定我做错了什么。组件上的类型有：

variant?: OverridableStringUnion<'elevation' | 'outlined', PaperPropsVariantOverrides>;

如何使用 PaperPropsVariantOverrides 扩展变体属性。我的预期结果是：

variant?: 'elevation' | 'outlined' | 'grey' | 'white',

成分：Paper.tsx

import React from 'react';
import MUIPaper, { PaperProps as MuiPaperProps } from '@mui/material/Paper';
import { PaperPropsVariantOverrides } from '@mui/material';

export interface PaperPropsVariantOverrides {
  variant: 'grey' | 'white';
}

export type PaperProps = MuiPaperProps;

const Paper: React.FC<PaperProps> = (props) => {
  const { ...paperProps } = props;

  return <MUIPaper variant="grey" {...paperProps} />;
};
export default Paper;

Answer 1

您可以通过声明覆盖模块来扩展，如下所示：

declare module '@mui/material/Paper' {
  interface PaperPropsVariantOverrides {
    myAwesomeVariant: true;
  }
}

然后在主题内部您可以定义变体的样式：

export const theme = createTheme({
  components: {
    MuiPaper: {
      variants: [
        {
          props: { variant: "myAwesomeVariant" },
          style: { border: "1px solid red" },
        },
      ]
    }
  }
});

那么你应该可以使用它

<ThemeProvider theme={theme}>
  <Paper variant="myAwesomeVariant">Stuff</Paper>
</ThemeProvider>

这里有更好的描述https://mui.com/customization/theme-components/#adding-new-component-variants