关于Antd的动态换肤?

唯见长江天际流
  • 683
北京市

antd现在有一个动态换肤的方案,但是支持的颜色太少。

有没有基于less的换肤方案,比如点击换肤的时候,loading直到新的less编译完成换肤

回复
阅读 608
2 个回答

只要你的项目样式是用less编写的,都可以使用less.js官方提供的换肤方案。
这个方案原理很简单,html插入你的样式文件(.less为后缀), less.js会解析.less后缀的文件并插入style标签。然后你只需要运行时调用less.js提供的函数,把新的变量颜色传进去,less.js会去读取那个style样式内容,修改里面的值。

less.js

antd v4及以前的版本,暴露出来的颜色变量只这么多:https://github.com/ant-design...

v5 会重点解决这个问题,不过还不是正式版,成本也有点大。

提供个思路,在组件最外层,比如 div#app 这个控制一个 class 样式名,提前预知好几套覆盖antd 样式的文件。

如果是自定义皮肤,思路类似,只是覆盖antd样式时可通过css变量的方式。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进