DUPLICATE: Component Class Select Style Override bug

Browser: Chrome Latest
OS: Linux Server, Windows client

This one really blew my mind.

I have a button component with a .button base class and a .button–inverse class that changes the background and text, and also a button–inverse-plain that does a similar styling but also removes the border.

If I create two buttons elements, one with .button, and another with .button and .button–inverse, everything works fine.

If I create two instances of the button component as i described above, add the .button-inverse class via a selector to one of them, save, then reload the page, the button with the button–inverse class loses the styling in the editor!

Even if edit the component and manually add the class, the styling on that class has no effect in the editor.

If select the third class, .button–inverse-plan, for some reason the styling works. Mindbending!

With all of these, everything displays exactly as expected on the front end.

two videos attached:

I don’t think it’s a plugin issue, but can provide an admin link to my site if it helps.

For what it’s worth, the same thing kind of class override issue happens to other components, not just the button one above.

Hi Alex,
Thanks so much for your report.

The problem is caused by the order and has already been reported here:

I’ll close this thread accordingly, and we’ll update the original thread once the issue is resolved.

Best regards,
timmse

1 Like