Add a way to set custom css classes

[equinusocio]

Hi, since we ca set a custom css it could be useful having a way to set custom css classes to each speciment and use our CSS.

Something like

```html|class-MyClass

And

```html
class: "MyClass"

[jstcki]

Can you describe the exact need for this? To which element would this class be applied?

[equinusocio]

Whit a custom css class we can target elements easily because now 80% are inline style or classnames generated with CSS modules or something similar. The custom class should be applied to the speciment outer container. Right now we have to do this to customise some speciment:

  .rmq-270de115 + div {
    border-left: 1px solid rgb(238, 238, 238);
  }

[jstcki]

Okay, that makes sense.

We'll change the styling approach anyway in the next few months (replace Radium with something else) …

So I wonder if making customizations like this is something we should support better. For example by exposing a way to override styles through the theme configuration itself or by adding readable and stable class names to all elements, so they can be targeted directly with CSS.

[equinusocio]

What about using css custom properties? You can expose specimens css properties that uses the css power.

.SpecimentRoot {
  --specimentName-background: var(--catalog-specimentname-background, #FFF);
}

.SpecimentInnerElement {
  background-color: var(--specimentName-background);
}

You will expose just the decoupled "api" --catalog-specimentname-background

[jstcki]

Yes, that would also be a good option. But currently we're still supporting IE11, and custom properties don't work there.

[equinusocio]

You can transpile the custom properties. You will lose the runtime editing, but is not needed at all.

[dlewand691]

YES!!! Please support custom classes, this would be a huge help when trying to customize for our brand and styling.