如何在主题材料UI中添加自定义样式

Question

如果需要，我想找到通过所有组件传递样式/主题的最佳实践。

某些类可能必须重用，因此需要包含在主题中：

root.tsx

const theme = createMuiTheme({ palette: { primary: { main: '#fff' }}  })

const useStyles = makeStyles((theme: Theme) => createStyles({
    logo : { height:'0.8rem' },
    align_right : { marginLeft: "auto"},
    unselectable : { 'user-select': 'none' }
}))


return <>
<Menu/>
</>

这是一个应该能够访问align_right类的组件： menu.tsx

const Menu = () => {

  const theme = useTheme()
  const cls = useStyles(theme)

  return <span className = {cls.align_right}>
    <Button color="inherit">Alpha</Button>
    <Button color="inherit">Beta</Button>
    <Button color="inherit">Gamma</Button>
    <Button color="inherit">Sigma</Button>
  </span>

}