装饰 textarea 后 CodeMirror 样式不起作用

Question

我有一个Nuxtjs/Vuejs 应用程序，其中我有一个与XML/JSON 相关的textarea。在用户为这些textarea 提供值后，它们将使用CodeMirror 装饰成XML/JSON。

最初，textarea 的高度为78vh，我希望我的CodeMirror 在进行美化后具有相同的height and width，并包含horizontal/vertical scroll bar 以在内容超出边界时移动.

我尝试像这样添加 CSS 属性，但它根本不起作用，我在浏览器中看到巨大的滚动条，而不是在 textarea 内。

.CodeMirror{
    height: 78vh;
    position: relative;
    overflow: hidden;
    border: 1px solid black;
}

我还尝试添加 !important 和 div > div > div > div > div.CodeMirror { 以确保我将父母考虑在内，但似乎没有什么对我有用。

谁能让我知道我需要做什么才能让我的textarea 拥有相同的height and width 并在其自身中包含horizontal and vertical scrollbar？

我在CodeSandBox here中添加了我的示例代码：https://codesandbox.io/s/boring-water-g14zd?file=/pages/index.vue

Answer 1

我在 JS 中而不是在 CSS 中添加，这对我有用：

for (const s of document.getElementsByClassName('CodeMirror')) {
        s.style.border = '1px solid black'
      }