在 CKEditor 5 中禁用时更改编辑器背景颜色？

问题描述

我将 CKEditor 5 与 React 框架一起使用。 编辑器禁用时如何将编辑器的背景设置为深灰色？

我正在使用此 CSS 在启用时将背景设置为白色：

.ck .ck-editor__main > .ck-editor__editable {
  background: #FFF;
}

但是，当子 div 具有 .ck-read-only 但 :has() 没有浏览器支持时，我只想将背景颜色值更改为灰色。

.e.g 这不起作用，因为浏览器尚不支持 :has()

.ck .ck-editor__main > .ck-editor__editable :has(> div.ck-read-only) {
  background: #C3C3C3;
}

组件的实现

                <CKEditor
                  disabled={true}
                  editor={Editor}
                  config={{
                    toolbar: [
                      'bold','italic','underline','bulletedList','numberedList','link','|','imageUpload'
                    ],placeholder: 'Start writing your note'
                  }}
                  onReady={editor => {
                    console.log('Editor is ready to use!',editor);
                  }}
                  onChange={(event,editor) => {
                    const data = editor.getData();
                    console.log({ event,editor,data });
                  }}
                />

解决方法

糟糕，我在我的选择器和类的附加位置中犯了一个错误。这允许我在禁用时设置背景颜色：

.ck .ck-editor__main > .ck-editor__editable.ck-read-only {
  background: #C3C3C3;
}