I have a CircularProgress element that I want to center, and to make the styling reusable, I decided to create a theme.d.ts file:
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;
}
After creating the theme, I implemented it as follows:
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>
);
Now I want to apply this new marginAutoItem to a component; how should I proceed?
// pseudo code example
<CircularProgress marginAutoItem />