行业资讯
📅 2026/7/13 16:36:17
解决 viteprees 中 vp-doc 样式影响组件预览
解决 viteprees 中 vp-doc 样式影响组件预览问题当使用vitepress: 1.0.0-rc.22作为组件库文档时会自动引入vitepress的默认主题其中vp-doc中有大量的html标签样式... .vp-doc table { display: block; border-collapse: collapse; margin: 20px 0; overflow-x: auto; } ...导致预览组件样式被影响未被覆盖样式的组件表现出vp-doc中设置的样式被外部影响导致组件表现不正确。解决方法给预览的组件加上vp-raw的 classat-table classvp-raw :columnscolumns :rowsrows/at-table然后安装postcsspnpm add -D postcss在项目目录下加入配置文件postcss.config.mjsimport { postcssIsolateStyles } from vitepress export default { plugins: [ postcssIsolateStyles({ includeFiles: [/vp-doc\.css/] // defaults to /base\.css/ }) ] }预览原.vp-doc table加上了not选择器问题解决。参考地址https://vitepress.dev/guide/markdown#raw