如何在 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;");