Reactjs 材质UI中样式化组件样式的混淆

我对所有使用材质UI的方式都有点困惑。我的目标是在整个应用程序中使用一个样式API。但是，最好有一些样式化的组件，比如一些全局组件的样式

MaterialUI公开了一个API来实现这一点。这被称为一种样式化组件的实现方式，即使实现与“真正的”样式化组件库有很大不同（？）：

您可以在本文的文档中找到另一个API（可能仅用于覆盖MUI组件的类）：

这两种实现都不允许我访问

主题

我真的希望有一种方法可以将一个简单的div（或任何其他本机元素）样式化为一个组件（像样式化的组件），但也能够访问

主题

这可能吗？
我喜欢这个版本，它非常简单

const useStyles = makeStyle(theme => ({ /* all of your css goodies */ }));

const myComponent = () => {
    const classes = useStyles(/* can pass in props here if you need to */)
    return <div className={classes.divCss}>Hi</div>
}

constusestyles=makeStyle（theme=>（{/*你所有的css好东西*/}））；
常量myComponent=（）=>{
const classes=useStyles（/*如果需要，可以在此处传入道具*/）
回电
}

还需要一个可以用来访问主题的函数，例如，
withStyles（theme=>（{…}））

MUI的文档可能有点随意，但大部分都是随意的。我应该在那里花些时间来买这些东西。
好的，是的，这就是我到目前为止一直在用的东西。现在，我发现自己真的很希望有一种简单的组件级样式。
const BootstrapInput = withStyles((theme) => ({
  root: {
    'label + &': {
      marginTop: theme.spacing(3),
    },
  },
}))(InputBase);

const useStyles = makeStyle(theme => ({ /* all of your css goodies */ }));

const myComponent = () => {
    const classes = useStyles(/* can pass in props here if you need to */)
    return <div className={classes.divCss}>Hi</div>
}