classDiagram styling does not work as documented

[McShelby]

The example from the documentation does not change color in the diagram.

<style>
    .cssClass > rect{
        fill:#FF0000;
        stroke:#FFFF00;
        stroke-width:4px;
    }
</style>

classDiagram
    class Animal:::cssClass

This is because the current implementation puts the CSS class cssClass not on the SVG g element but directly on its rect subelement.

The current implementation is sub par because the divider lines between class header, variables and functions require further CSS selectors, otherwise they are not affected by styling.

I think the implementation should be changed to match the documentation. Additionally the documentation should be changed to have a running example for styling as it is done within previous sections of the document.

• OS: Windows
• Browser: FF79
• Mermaid: 8.7.0

[jgreywolf]

The reason that I went with styling the inner rect is that when styling the g element it does NOT look good at all. For some reason the font style is changing without even having it set to change in my css.

I will continue to look into this.

[McShelby]

Styling the inner rect is not the problem here but the fact that .cssClass is applied to rect itself not to the containing group!

[jgreywolf]

Can someone confirm for me if this is still an issue? As there have been many changes in the past 3 years ;)

I will close this after 30 days if no response

[McShelby]

By now (following my previous link to the official documentation), the styling syntax of class Animal:::cssClass seems to be broken and resulting in no diagram at all.

For my test page it just "bombs" the diagram, in the official documentation there just seems to be the text of null be present under the examples.

So, yes, it's still an (now slightly different) issue.

[jgreywolf]

This will be resolved with #5880