markdown样式覆盖的解决方案

背景

        最近公司在搞的ai项目中遇到了一个场景，公司一个新的ai项目在最开始搭建项目的直接引用了reset.css，项目开发到一半需要引用react-markdown插件展示gpt返回的内容，但是渲染的时候发现例如h1、h2、li、ui标签等等的默认样式由于reset的原因直接失效了然而项目开发已经进行到一半了不可能直接将reset.css去掉。

解决

        查了各种插件相关的资料发现想通过插件本身的参数来解决是不太可能的，于是转念一想还是直接从css入手。

1.给节点加上class名

import Markdown from 'react-markdown'

export default () => {
    return <Markdown className="editor"># 标题h1</Markdown>
}

2.reset.css样式处理

*:not(.editor) {
    line-height: 1rem;
    margin: 0;
    padding: 0;
    ...
}

.editor {
    line-height: 1.5rem;
}

.editor * {
    line-height: inherit;
    margin: revert;
    padding: revert;
    ...
}

1.其中样式重置中的not(.editor)i排除选中文档流中class名为editor的节点但是这里不包括.editor下的子节点。
2.下面的.editor *是给.editor下的子节点进行revert默认样式还原
3.中间遇到line-height属性比较特殊直接revert无法直接还原样式因此我在.editor节点上直接设置line-height样式然后在子节点中通过inherit去继承父元素的样式

总结

        css还是有蛮多可玩性的，包括现在的css-in-js、unocss、.css文件、classNames、styledComponent等形式，虽然不可能完全剔除css代码，但是发展方向一直都是在精简css代码量在项目中的比重，例如我们这次就大量的采用unocss的方式配合少量的css-in-js和styledComponent大大降低了css代码在项目中的占比提高了代码的可读性。
        好的东西最终是会被慢慢接受的，最开始的时候团队里面都不适应unocss的css方式但是在这次的项目开发下来也都是欣然的接受了unocss。

弱者是没有资格谈正义的