CSS Classes not working anymore with Flowchart Diagram - v8.8.0

[xsa]

Describe the bug CSS Classes do not seem to be working anymore with a flowchart diagram, on version 8.8.0. It does work when defining the diagram as `graph' though, but then some other capability is not working.

To Reproduce Create a flowchart diagram, with a CSS class defined in an external .css file.

Expected behavior I expect it to work, like in previous versions.

Screenshots If applicable, add screenshots to help explain your problem.

Code Sample

CSS class in external .css file:

.className > rect {
    fill: yellow !important;
}

Graph code: class A,B,C,D className;

Desktop (please complete the following information):

• OS: MacOS 12.6
• Browser: Firefox 10.5.0.1

[atharvagarwal]

Hello I'm new to opensource and I would like to help , if you guide me and explain the problem well

[jgreywolf]

@xsa Is this still an issue with current versions?

[xsa]

@xsa Is this still an issue with current versions?

I believe so, unless I'm doing something wrong. I think it may be related to my use of Material for MkDocs. Maybe there's something incompatible with that.

I tried with either graph or flowchart diagram, does not seem to be working.

.class-name > rect,
.class-name > polygon {
    fill: var(--pink) !important;
    color: #fff!important;
    stroke: #000 !important;
}

[dan-mcdonald]

The example in the documentation for CSS classes is broken, i.e. no styling is applied. I think it might be related to this issue.

[dzhus]

Check specificity of CSS selectors applied to rendered nodes – default Mermaid CSS might interfere with your "external CSS".