如何在不丢失样式的情况下将材料-ui响应组件包装到Web组件？
如何在不丢失样式的情况下将材料-ui响应组件包装到Web组件？
提问于 2019-09-04 14:24:33
我正在开发一个包装器，将反应组件转换为Web组件。当组件在阴影DOM中呈现时，需要应用什么样式？
我试图在Web组件中包装一个组件(Button)，但是当我将该组件附加到影子DOM时，样式不会被应用。
//包装器
import ReactDOM,{ render } from 'react-dom';
import Button from '@material-ui/core/Button';
class ButtonWrapper extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
const mountPoint = document.createElement('span');
this.attachShadow({ mode: 'open' }).appendChild(mountPoint);
ReactDOM.render(
<Button variant="contained" color="primary">
Material Button
</Button>
, mountPoint);
}
}
customElements.define('button-material-wrapper', ButtonWrapper);//HTML
<button-material-wrapper></button-material-wrapper>//Webpack.config
...
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: { presets: ['@babel/preset-env', '@babel/preset-react'] }
}
},
{
test:/\.(s*)css$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
}
....预期输出:正确呈现material按钮。
实际输出: material按钮作为阴影根目录的子节点被同步呈现，但是材料样式没有被应用。
回答 1
Stack Overflow用户
发布于 2019-11-08 18:41:11
在webpack中，样式加载程序帮助您将样式添加到全局文档样式中.但是web组件无法访问阴影DOM之外的样式(包括全局材料样式)，这将导致您的实际输出。我发现的一个解决方案是使用css-to-string-loader手动导入物料组件的scss的字符串，然后手工将其添加到当前阴影DOM的样式中。
// Webpack.config
{
test: /.*\.scss$/,
use: ['css-to-string-loader', 'css-loader', 'sass-loader'],
},// In Web组件(connectedCallback)
const style = document.createElement('style');
const style.innerHTML = require('@material/xxxx.scss');
const head = document.createElement('head');
head.appendChild(style);
this.attachShadow({ mode: 'open' }).appnedChild(head)在我看来，这是不优雅的，期待一个更好的解决方案。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57790526
复制相关文章
相似问题
腾讯云开发者
