如何将我的 material-ui 主题公开到控制台，如 material-ui 站点？

Question

我正在做一个 React 项目，并决定使用 material-ui 作为样式，但我还必须学习如何在此过程中使用它。 我一直在使用主题时遇到问题，一直在阅读 material-ui 文档和其他在线资源，但仍然无法掌握它。 我认为能够在 Chrome 检查器/开发工具中看到我的主题会有所帮助，因为 material-ui 在他们的网站上已经完成了，但我不知道该怎么做。 如何将我的主题公开到控制台？

material-ui 在所有页面上暴露一个全局主题变量

Answer 1

由于您似乎尚未创建自定义主题，因此主题对象应与网站上的对象完全相同！

如果您真的想在控制台中看到自己的样式，请在这样的组件上声明样式时尝试对其进行控制台记录！

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

然后在导出组件时使用

withStyles(styles)(YourComponentHere);

Answer 2

我建议在您的<App />组件中将theme存储在window上：

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

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

export default App;