Question

我们主要是使用实质性UI来在我们的应用程序中提供更好的用户体验。最大的问题是在MUI和纯html之间同步样式。

是否存在一种机制，用于公开material-ui css-classes，以便它们也可以在html-notation中使用？

<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-apps之外也使用所有MUI样式。

Answer 1

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

https://material-ui.com/customization/css-in-js/#global-css

全球CSS

我们提供了类名的自定义实现   Material-UI需求的生成器：createGenerateClassName()。以及   可以通过以下方式使类名确定性：   dangerouslyUseGlobalCSS选项。打开时，类名将   看起来像这样：


发展：.MuiAppBar-root

生产：.MuiAppBar-root


⚠️要非常   使用时要小心 dangerouslyUseGlobalCSS。我们提供此选项为   逃生舱口，以便快速制作原型，但您应避免依赖   它用于在生产中运行的代码，因为很难跟踪   类名API更改。全局CSS本质上是脆弱的。

然后，您必须在某种程度上将纯HTML组件的结构与material-ui组件进行匹配。

我可能不希望使用dangerouslyUseGlobalCSS，而是手动将任何需要的生成的material-ui CSS复制到我自己的样式表中。至少它将是稳定的。尤其是仅用于少数几个组件时。

（这仅适用于Material-ui v1.x，不适用于v0.x。）

如何在组件外部公开material-ui-class？

1 个答案:

全球CSS