我想将CircularProgress元素居中，并且我认为使样式可重用会很酷，所以我创建了一个主题。d.ts：

import { Theme, ThemeOptions } from '@mui/material/styles'

declare module '@mui/material/styles' {
  interface CustomTheme extends Theme {
    marginAutoItem: {
      margin: string;
    };
  }
  // allow configuration using `createTheme`
  interface CustomThemeOptions extends ThemeOptions {
    marginAutoItem: {
      margin?: string;
    };
  }
  export function createTheme(options?: CustomThemeOptions): CustomTheme;
}

然后我有这个：

const theme = responsiveFontSizes(createTheme({
  palette: {
    primary: {
      main: "#626262",
    },
    secondary: {
      main: "#DFDFDF",
    },
  },
  typography: {
    fontFamily: [
      'Arial Regular',
      'sans'
    ].join(','),
  },
  marginAutoItem: {
    margin: 'auto'
  }
}));

const container = document.getElementById('root');
const root = createRoot(container as Element);

root.render(
  <React.StrictMode>
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={theme}>
        <App />
      </ThemeProvider>
    </StyledEngineProvider>
  </React.StrictMode>
);

现在我希望将这个新的marginAutoItem添加到一个组件中;我该怎么做呢？

// pseudocode in a sense
<CircularProgress marginAutoItem />