CSS classes from Studio UI conflict with custom classes in editview #19221

janein · 2026-06-26T06:47:38Z

janein
Jun 26, 2026

Hi :)

When switching from classic-ui to studio, we encountered an issue, I not yet have found a solid solution for.
Besides the ant-prefixed classes, some UI-Elements inside the editview have also other BEM-style css classes like .button, .button__text, etc.
As these are pretty generic namings, they easily come in conflict with our custom CSS rules, applied for the frontend. And as we want to have a look for the editview which is close to the rendered frontend, we use the same styles.

Is there any good pattern to work around this issue or should this be reported as a bug?

Happy to hear your opinions :)

For example, this is a button rendered inside the toolbar:

<button type="button" class="ant-btn css-4knkkc ant-btn-link ant-btn-color-primary ant-btn-variant-link button button--type-link button--color-undefined acss-f5eao5 acss-1trhfkd icon-button--theme-primary icon-button--variant-undefined icon-button--size-small" disabled="">
  <span class="button__text">
    <!--  more content -->
  </span>
</button>

janein · 2026-06-26T07:00:04Z

janein
Jun 26, 2026
Author

It seems to be an issue, that the css rules have the same specificity, but the rules from studio-ui get injected at the very top of the <head>. Our custom styles come afterwards and therefore overwrite them.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Pimcore

CSS classes from Studio UI conflict with custom classes in editview #19221

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Pimcore

CSS classes from Studio UI conflict with custom classes in editview #19221

Uh oh!

Uh oh!

janein Jun 26, 2026

Replies: 1 comment

Uh oh!

janein Jun 26, 2026 Author

janein
Jun 26, 2026

janein
Jun 26, 2026
Author