在React JS中使用Katex时矩阵元素渲染到矩阵外部如何解决？

问题引发原因 #

你配置的全局[class*="col-"]通配类选择器会命中所有类名包含col-片段的DOM元素，而Katex渲染矩阵结构时，会自动为矩阵列生成带col-前缀的内置类名（比如用于控制列对齐的col-align-c类等）。全局规则给这类元素强制添加了float: left属性，完全破坏了Katex矩阵原本的正常流式布局，使矩阵元素脱离文档流偏移到矩阵容器外部，就出现了对应的异常效果。

修复方案 #

可以根据项目实际情况选择以下任意一种方案：

• 调整自定义栅格类的命名规则，给你的栅格列类添加专属前缀（例如改为biz-col-xx），对应CSS选择器修改为[class*="biz-col-"]，从根源避免和Katex内置类名冲突。
• 限制栅格CSS的生效范围，给你的栅格外层容器加专属类名（例如.grid-container），修改选择器为.grid-container [class*="col-"]，让浮动规则仅作用于你自己的栅格系统，不会命中Katex内部元素。
• 针对Katex容器增加重置规则，覆盖全局浮动属性，添加以下CSS即可：

.katex [class*="col-"] {
    float: none;
}

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