Reactjs 如何在材质UI中集成代码编辑器？

我尝试了npm中所有可能流行的代码编辑器，但所有编辑器都拒绝显示单空格字体。我尝试了EProvider和内联样式，但都不起作用它显示幻影单空格字体，实际显示的字体是默认字体。除了代码编辑器外，单空格在排版组件中工作。除了字体，所有代码编辑器都可以正常工作。请帮助。

阴影根 使用shadow root，您可以从根css设计中分离出来。有关文档，请参阅

---

我的朋友为旧的解决方案感到抱歉。我更新的解决方案connectedCallback（）函数不是必需的。

window.customElements.define('codemirror', class extends HTMLElement {
    constructor() {
        super();
        let shadowRoot = this.attachShadow({ mode: 'open' });
        // !! Shadow Root inside css rules you can change this
        shadowRoot.innerHTML = `
            <style>
               @import url(https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.24.2/codemirror.min.css)
            </style>` 
        // !! on ready you can change yourself CodeMirror constructor
        this.cm = CodeMirror(this.shadowRoot, {lineNumbers: true});        
    }
    
});

var code = document.getElementById("test");
code.cm.setValue("var i = 0;");