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

Answer 2

You can customize the CKEditor style by using these classes

When CKEditor gets Focused

.my-ck-active .ck-rounded-corners .ck.ck-editor__main>.ck-editor__editable, .ck.ck-editor__main>.ck-editor__editable.ck-rounded-corners{
  border-color: #16a34a !important;
  //you can add styling here whatever you want

}

When CKEditor gets Error

.my-ck-error .ck-rounded-corners .ck.ck-editor__main>.ck-editor__editable, .ck.ck-editor__main>.ck-editor__editable.ck-rounded-corners{
  border-color: red !important;
  //you can add styling here whatever you want

}

Answer 3

//On Focus

.my-ck-active .ck-rounded-corners .ck.ck-editor__main>.ck-editor__editable, .ck.ck-editor__main>.ck-editor__editable.ck-rounded-corners{
  border-color: #16a34a !important;
}

//on Error

.my-ck-error .ck-rounded-corners .ck.ck-editor__main>.ck-editor__editable, .ck.ck-editor__main>.ck-editor__editable.ck-rounded-corners{
  border-color: red !important;
  //you can add styling here whatever you want

}