如何在 Material UI 中集成代码编辑器？

Question

我已经尝试了 npm 中所有可能的流行代码编辑器，但它们都拒绝显示等宽字体。 我尝试过 ThemeProvider 和内联样式，但它不起作用。 它显示幻影等宽字体，实际显示的字体是默认字体。 除了代码编辑器，等宽字体还可以在 Typography 组件中使用。 除了字体，所有代码编辑器都可以正常工作。 请帮忙。

Answer 1

影根

使用 shadow root，您可以隔离 root css 设计。 有关文档，请参阅https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

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});        
    }
    
});

HTML

使用自定义元素<codemirror id="test"></codemirror> ;

JS

从元素.cm 获取 CodeMirror 对象

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