Markdown中用CSS全局定制Mermaid节点样式：标题无法变色问题

我想在Markdown文件里全局定制Mermaid图表，用<style>标签给.green2类的节点设置样式时，节点的填充色、边框都能正常生效，但节点标题“Node A”的颜色始终改不了。但改用Mermaid内置的classDef语法定义样式时，文本颜色却能正常修改。

用到的代码 #

Mermaid代码

A[Node A]:::green2--> B[Node B];

自定义CSS代码

<style>
.green2 > rect {
    fill:#01ff70 !important;
    stroke:#000 !important;
    stroke-width:2px !important;
    color : rgb(173,216,230);
}
</style>

问题原因 #

Mermaid生成的SVG节点里，文本内容是独立的<text>元素，并不在<rect>元素内部。你当前的CSS只选中了.green2下的<rect>，自然影响不到文本部分。而classDef是Mermaid自身的样式规则，它会自动把样式应用到节点的所有关联元素（包括文本）。另外要注意，SVG的文本颜色是通过fill属性控制的，不是普通HTML的color属性，这也是之前设置color不生效的关键原因。

解决方法 #

要修改文本颜色，需要单独选中.green2下的<text>元素，将样式应用到它上面。修改后的CSS如下：

<style>
.green2 > rect {
    fill:#01ff70 !important;
    stroke:#000 !important;
    stroke-width:2px !important;
}
.green2 > text {
    fill: rgb(173,216,230) !important;
}
</style>

内容的提问来源于stack exchange，提问作者Gum