How can I override anonymous classes?

v6
1

Hi. I’m new to codemirror and having trouble with applying custom classNames.

Below is what I’m currently having trouble with.

For example, if I’m working on custom className for autocomplete tooltip option,

below is the generated anaoymouse class
.ͼ2 .cm-tooltip-autocomplete ul li[aria-selected]
And it has background-color attribute.
So when I try to change the background color by applying tooltip optionClass,
it doesn’t work.

Can I get help on how to handle this problem?

Thank you

Extra similar troubling examples

Seems like the default background-color for cm-editor is white.
And when I tried to change the background color by

EditorView.theme({
  '&': {
    backgroundColor: 'transparent',
  },
....
})

it didn't work.
So I had to specify !important to apply my custom background color
EditorView.theme({
  '&': {
    backgroundColor: 'transparent !important',
  },
....
})

Am I not using this feature in a proper way?

Thank you

2

If you use EditorView.theme to define CSS rules, your styles will get a generated class in the same position, giving your rule the same precedence as these. If you want to write raw CSS, use .cm-editor in place of the theme selector to also get the same level of precedence.

1 Like
3

Oh it’s quite simple.

Thanks a lot! :slight_smile: :+1: