Adding styling to standard editors

Questions
,
1

We have a customer that we’ve upgraded to 15. Before the upgrade we had customized a property editor by adding some styling, that was injected to the backoffice.
I added the styles through an entry point, and then remembered that property editors now exist in the shadow dom. Is there a way to inject styling directly to a property editor without overwriting it?

2

I built a react adapter that gets converted into Lit so I build easily any editor I’d like and unregister the original one

3

Hi @gheithen, and welcome to the forum!

You are on the right path. You have two options, I reckon;

  1. See if the property editor you want to style exposes any CSS custom variables. They would have the format --umb-some-variable. These can be set directly from your stylesheet like this:
:root {
  --umb-some-variable: #efefef;
}
  1. You can extend the entire property editor using a manifest file. If you create a web component that extends the built-in property editor, you can set the styling directly in your element without touching much else. Following that, you can register your element as a so-called propertyEditorUi and select that as your UI for the data editor in the Backoffice. All your data should be preserved.

Here is some more information about creating a property editor: