在``materia ui`中全局更新组件颜色/font的最佳方式是什么？

import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#ff0000', // 设置主色调
    },
    secondary: {
      main: '#00ff00', // 设置次要色调
    },
  },
  typography: {
    fontFamily: 'Arial', // 设置字体
  },
});

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>,
  document.getElementById('root')
);

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  button: {
    color: theme.palette.primary.main, // 使用主色调
    fontFamily: theme.typography.fontFamily, // 使用自定义字体
  },
}));

function MyComponent() {
  const classes = useStyles();

  return (
    <Button className={classes.button}>按钮</Button>
  );
}