In CKEditor 5 Change Editor Background Color when Disabled?

Question

I am using CKEditor 5 with the React framework. How do I set the background of the editor to dark grey when the editor is disabled?

I am using this CSS to set the background to white when enabled:

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

However, I only want to change the background color value to grey when the child div has .ck-read-only but :has() has no browser support.

.e.g this does NOT work because browsers do not yet support :has()

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

Implementation of component

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

Answer 1

Oops, I made a mistake in my selector and where the classes were attached. This allows me to set the background color when disabled:

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