解决vuepress 在引用element ,vxetable 表格样式引发的样式错误。
先定位到源码。 (我的是vuepress x1版本)
在源码路径node_modules@vuepress\theme-default\styles\index.styl (166行,可能版本不一样位置不一样)
你会看到 全局样式
table
border-collapse collapse
margin 1rem 0
display: block
overflow-x: auto
tr
border-top 1px solid #dfe2e5
&:nth-child(2n)
background-color #f6f8fa
th, td
border 1px solid #dfe2e5
padding .6em 1em
然后很清楚的看到了样式污染了element 和vxe 的样式。
该怎么解决呢? 因为这个样式是把markdown 为了table样式,为了不污染这个样式,
在.vuepress文件夹下面创建styles文件夹,然后在进行创建index.styl文件。
具体为什么要这么做,可以看官方文档(目录结构)
有个很清晰的解释:
docs/.vuepress/styles/index.styl
: 将会被自动应用的全局样式文件,会生成在最终的 CSS 文件结尾,具有比默认样式更高的优先级。
so:在index.styl在进行样式覆盖,就不用去操作源码。
如果不知道Stylus 语法怎么写的话,可以去复制我的下面的代码
注意不会Stylus 语法的话,就不需要进行额外的修改,如果版本不一样,可能node_modules@vuepress\theme-default\styles\index.styl这里的样式污染也会不一样,安这个原理来,也是应该可以解决问题的
.vxe-table, .el-table
table
border-collapse unset
margin unset
display inherit
overflow-x unset
tr
border-top unset
&:nth-child(2n)
background-color unset
th, td
border unset
padding unset