Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Attention: 关于组件样式的问题 #14

Open
lianghx-319 opened this issue Nov 22, 2019 · 0 comments
Open

Attention: 关于组件样式的问题 #14

lianghx-319 opened this issue Nov 22, 2019 · 0 comments
Labels
good first issue Good for newcomers

Comments

@lianghx-319
Copy link
Member

lianghx-319 commented Nov 22, 2019

受影响版本

@femessage/element-ui: ~2.12.1
对应官方 element-ui: 2.12.0

原因

  • 由于升级失误,导致本仓库的 npm 包比 element 官方的 npm 包,领先了几个 commit。

暂时发现的问题

  1. 如果基于官方 element-ui 2.12.0 生成的主题,配合 @femessage/element-ui 使用时,有部分组件的样式会不匹配。

  2. 官方 element 也存在的问题,如果使用按需引入组件样式的方式使用组件库,部分组件的样式之间会互相覆盖

样式出现问题的组件

  • Drawer (问题1)
  • Cascader (问题2)

解决方案

问题1

请根据本仓库的 master 分支生成自定义主题,即可解决。等到 element 更新版本后再同步一次,就可以无缝官方的主题了。不过由于本仓库新增了部分组件,所以推荐使用本仓库作为基准生成主题

问题2

因为按需引入和代码分割的共同作用,部分相同权重的组件样式,会随着路由的切换不断被新增的样式覆盖,导致样式污染的情况发生。

被动解决:等待官方 element 的更新

主动解决:可以使用 cdn 全量引入组件样式,对于长期使用不断迭代的项目,长远角度来说,cdn 缓存机制节省的流量比打包在项目中更多。

cdn 链接:https://cdn.jsdelivr.net/npm/@femessage/[email protected]/lib/theme-chalk/index.css

gzip:37.5k

@lianghx-319 lianghx-319 pinned this issue Nov 22, 2019
@levy9527 levy9527 added the good first issue Good for newcomers label Nov 20, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

2 participants