Reactjs 如何在组件外部公开材质ui类？_Reactjs_Material Ui

Reactjs 如何在组件外部公开材质ui类？

reactjs material-ui

Reactjs 如何在组件外部公开材质ui类？,reactjs,material-ui,Reactjs,Material Ui,我们主要使用MaterialUI在应用程序中提供更好的用户体验。最大的问题是在MUI和普通html之间同步样式是否有一种机制，用于公开材料ui css类，以便这些类在html表示法中也可用 <html> <head></head> <body> <header class="appBar">We'd like to use MUI-style here</header> &l

我们主要使用MaterialUI在应用程序中提供更好的用户体验。最大的问题是在MUI和普通html之间同步样式

是否有一种机制，用于公开材料ui css类，以便这些类在html表示法中也可用

<html>
    <head></head>
    <body>
        <header class="appBar">We'd like to use MUI-style here</header>
        <div id="reactMountPoint"><!-- Mui components goes here --></div>
        <form>
            <button />
        </form>
    </body>
</html>


我们想在这里使用梅风格

因此，基本上我们也希望在react应用程序之外使用所有MUI样式。

这不是最好的主意，但也有可能，这里有一些文档：

全局CSS 我们提供了类名的自定义实现物料UI需求的生成器：。以及使用

危险使用globalcss

选项。启用时，将显示类名像这样：

开发：
```
.MuiAppBar root
```
生产：
```
.MuiAppBar root
```

⚠️ <很强使用GLOBALCSS时要小心

危险使用GLOBALCSS

。我们提供此选项作为用于快速原型制作的逃生舱，但应避免依赖它适用于在生产环境中运行的代码，因为很难跟踪类名API更改。全局CSS天生就是脆弱的

然后，您必须将普通HTML组件的结构与材质ui组件紧密匹配

我可能不喜欢使用危险的globalcss，而只是手动将任何需要生成的材料ui-CSS复制到我自己的样式表中。至少会稳定下来。特别是当它仅用于少数组件时

（这仅适用于材质ui v1.x，而不是v0.x。）

我就是这么做的。我只是讨厌代码中有重复的代码/功能。我也在考虑使用危险的全球化学武器。也许复制必要的样式是次好的选择。以这种方式混合框架（React和non-React）总是需要一个折衷方案，一些CSS复制并不是太糟糕。理想的解决方案当然是使用React做所有事情，但我知道如果您有很多旧代码，这可能会很困难。