Katex CSS clash

[ganpa3]

We have an overlay CSS class defined. However, Katex too has the overlay class defined. This causes improper rendering of the output. The overlay class is used in many places in our program.
So, is there any way to prevent Katex from adding that class or any other solution?

E.g., this contains an overlay class in the span element (just above the path element.

Example

$ cat in
\vec r=x\hat{i}+y\hat{j}

$ npx katex --input in | prettier --parser html --tab-width 4
<span class="katex"
    ><span class="katex-mathml"
        ><math xmlns="http://www.w3.org/1998/Math/MathML"
            ><semantics
                ><mrow
                    ><mover accent="true"><mi>r</mi><mo>⃗</mo></mover
                    ><mo>=</mo><mi>x</mi
                    ><mover accent="true"><mi>i</mi><mo>^</mo></mover
                    ><mo>+</mo><mi>y</mi
                    ><mover accent="true"><mi>j</mi><mo>^</mo></mover></mrow
                ><annotation encoding="application/x-tex"
                    >\vec r=x\hat{i}+y\hat{j}
                </annotation></semantics
            ></math
        ></span
    ><span class="katex-html" aria-hidden="true"
        ><span class="base"
            ><span
                class="strut"
                style="height: 0.714em; vertical-align: 0em"
            ></span
            ><span class="mord accent"
                ><span class="vlist-t"
                    ><span class="vlist-r"
                        ><span class="vlist" style="height: 0.714em"
                            ><span style="top: -3em"
                                ><span class="pstrut" style="height: 3em"></span
                                ><span
                                    class="mord mathnormal"
                                    style="margin-right: 0.02778em"
                                    >r</span
                                ></span
                            ><span style="top: -3em"
                                ><span class="pstrut" style="height: 3em"></span
                                ><span
                                    class="accent-body"
                                    style="left: -0.17994em"
                                    ><span
                                        class="overlay"
                                        style="height: 0.714em; width: 0.471em"
                                        ><svg
                                            width="0.471em"
                                            height="0.714em"
                                            style="width: 0.471em"
                                            viewBox="0 0 471 714"
                                            preserveAspectRatio="xMinYMin"
                                        >
                                            <path
                                                d="M377 20c0-5.333 1.833-10 5.5-14S391 0 397 0c4.667 0 8.667 1.667 12 5
3.333 2.667 6.667 9 10 19 6.667 24.667 20.333 43.667 41 57 7.333 4.667 11
10.667 11 18 0 6-1 10-3 12s-6.667 5-14 9c-28.667 14.667-53.667 35.667-75 63
-1.333 1.333-3.167 3.5-5.5 6.5s-4 4.833-5 5.5c-1 .667-2.5 1.333-4.5 2s-4.333 1
-7 1c-4.667 0-9.167-1.833-13.5-5.5S337 184 337 178c0-12.667 15.667-32.333 47-59
H213l-171-1c-8.667-6-13-12.333-13-19 0-4.667 4.333-11.333 13-20h359
c-16-25.333-24-45-24-59z"
                                            /></svg></span></span></span></span></span></span></span
            ><span
                class="mspace"
                style="margin-right: 0.2777777777777778em"
            ></span
            ><span class="mrel">=</span
            ><span
                class="mspace"
                style="margin-right: 0.2777777777777778em"
            ></span></span
        ><span class="base"
            ><span
                class="strut"
                style="height: 1.00629em; vertical-align: -0.08333em"
            ></span
            ><span class="mord mathnormal">x</span
            ><span class="mord accent"
                ><span class="vlist-t"
                    ><span class="vlist-r"
                        ><span class="vlist" style="height: 0.92296em"
                            ><span style="top: -3em"
                                ><span class="pstrut" style="height: 3em"></span
                                ><span class="mord mathnormal">i</span></span
                            ><span style="top: -3.22852em"
                                ><span class="pstrut" style="height: 3em"></span
                                ><span class="accent-body" style="left: -0.25em"
                                    ><span class="mord">^</span></span
                                ></span
                            ></span
                        ></span
                    ></span
                ></span
            ><span
                class="mspace"
                style="margin-right: 0.2222222222222222em"
            ></span
            ><span class="mbin">+</span
            ><span
                class="mspace"
                style="margin-right: 0.2222222222222222em"
            ></span></span
        ><span class="base"
            ><span
                class="strut"
                style="height: 1.1174em; vertical-align: -0.19444em"
            ></span
            ><span class="mord mathnormal" style="margin-right: 0.03588em"
                >y</span
            ><span class="mord accent"
                ><span class="vlist-t vlist-t2"
                    ><span class="vlist-r"
                        ><span class="vlist" style="height: 0.92296em"
                            ><span style="top: -3em"
                                ><span class="pstrut" style="height: 3em"></span
                                ><span
                                    class="mord mathnormal"
                                    style="margin-right: 0.05724em"
                                    >j</span
                                ></span
                            ><span style="top: -3.22852em"
                                ><span class="pstrut" style="height: 3em"></span
                                ><span class="accent-body" style="left: -0.25em"
                                    ><span class="mord">^</span></span
                                ></span
                            ></span
                        ><span class="vlist-s">​</span></span
                    ><span class="vlist-r"
                        ><span class="vlist" style="height: 0.19444em"
                            ><span></span></span></span></span></span></span></span
></span>

[edemaine]

Could you elaborate on what conflicts you're seeing? What rules have you defined for .overlay that cause KaTeX to render incorrectly?

The short answer is that there's no easy way to do what you request, other than modifying KaTeX's source. One long-term approach would be #1456 (prefix all KaTeX classes with something like kt-). Another would be to try to protect against whatever your rules are doing (a partial reset); but that may be difficult to do in general. You can likely do this yourself now, adding rules like .katex .overlay { ...undo whatever rules you have for .overlay...}

[ganpa3]

Thanks for the quick reply.

We fixed this by changing our CSS. We updated the status of the issue #1456
It would be great if it gets resolved :)