reactjs 我怎样才能把我的material-ui主题像material-ui网站一样暴露给控制台?

6ie5vjzr  于 2023-01-08  发布在  React
关注(0)|答案(2)|浏览(147)

我正在做一个React项目,决定使用material-ui来设计样式,但我也必须学习如何在这个过程中使用它。我不断遇到主题化的问题,我一直在阅读material-ui文档和其他在线资源。但我还是很难掌握它。我想能够在Chrome检查器/开发工具中看到我的主题会很有帮助-UI已经在他们的网站上做了,但我不知道如何做。我怎么才能暴露我的主题到控制台?
material-ui exposes a global theme variable on all the pages

iklwldmw

iklwldmw1#

由于您似乎没有创建自定义主题,因此您的主题对象应该与网站上的主题对象完全相同!
如果你真的想在控制台中看到你的样式,那么在像这样的组件上声明你的样式时,尝试控制台日志记录它!

const styles = theme => console.log(theme) || ({
  bold: {
    fontWeight: 'bold',
  }
});

然后在导出组件时使用

withStyles(styles)(YourComponentHere);
deikduxw

deikduxw2#

我建议在<App />组件中将themewindow上隐藏一次:

function App() {
  React.useEffect(() => {
    window.theme = theme;
    console.info({ theme });
  }, [theme]);

  return (
    <ThemeProvider theme={theme}>
      {/* ... */}
    </ThemeProvider>
  );
}

export default App;

相关问题