使用Material ui封装ReactJS嵌入式应用程序时的外观问题

Question

我正在Wordpress页面中嵌入一个使用Material UI样式组件的ReactJS应用程序。我正在使用webpack对js进行编译。

我已经生成了应用程序的嵌入式版本的捆绑包，我正在以以下方式导入和实例化

<script src="https://<domain url>/path/myapp.app.bundle.js"></script>
<script type="text/javascript">
function loadApp() {
window.MyApp("my-app-div");
}
</script>

我的adddiv对应于我希望应用程序出现的div的id

一切都是在功能的角度下进行的。

我的问题与受wordpress主题css影响的应用程序的外观有关。

我曾尝试使用组件CssBaseline和ScopedCsBaseline，但渲染似乎忽略了它们。

我也尝试过这些指令来重置css样式，但它不起作用

#my-app-div {
all: initial; /* blocking inheritance for all properties */
}
#my-app-div * {
all: unset; /* allowing inheritance within #my-app-div */
}

我找到了一个可能的解决方案，在MaterialUI样式组件的所有css前面加上我的应用程序divdiv的id，这样样式组件的css比来自wordpress主题的css具有更高的优先级。我还发现了一个插件，可以帮助解决这个问题，但它与最新版本的stylis不兼容https://www.npmjs.com/package/stylis-plugin-extra-scope

有人建议帮我吗？

Answer 1

您是否尝试为生产构建的材料UI类添加前缀使用以下方法。

import { createGenerateClassName, StylesProvider } from '@material-ui/core'
const generateClassName = createGenerateClassName({
seed: 'xyz',
productionPrefix: 'abc-',
})
function App() {
return (
<StylesProvider generateClassName={generateClassName}>
...
</StylesProvider>
)
}