Styling Example Does Not Function

1

Update Please ignore, this was entirely a mistake on my part with my environment.

I am attempting to follow the example in Styling Example in order to change the display of the outline when the CodeMirror editor is focused.

.cm-editor.cm-focused { outline: 2px solid cyan }

Unfortunately, this snippet does not appear to function. By default, creating a minimal editor like so:

const state = EditorState.create({
  doc: '',
  extensions: []
})

new EditorView({
  state,
  parent
})

…results in a generated CSS class being added to the .cm-editor element, and the default outline rule includes that generated class name, and so a selector like .cm-editor.cm-focused does not have the specificity needed to override the default styles.

CleanShot 2022-09-10 at 16.20.00@2x
CleanShot 2022-09-10 at 16.20.00@2x698×130 13.1 KB

Is there another way to accomplish this task?

2

Looks like using a theme extension is the right way to do this. It’s unfortunate, since I reached for CodeMirror because the documentation indicated that I could use my existing Tailwind setup at least for the basic styles, but that does not appear to be the case.

3

Nope, this was entirely a mistake on my part. The example works as expected. :man_facepalming: