[comp:utils] 如果想定制化主题，需要怎么处理？

lvzero535 commented 2 years ago

[x] I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

解决主题定制化问题

What does the proposed API look like?

覆盖原有样式，简单操作最好

idux-bot[bot] commented 2 years ago

Translation of this issue:

[Comp: Utils] If you want to customize the theme, how do you need to deal with?

[x] i Have Searched The [https://github.com/iduxfe/idux/issues) of this repository and believe That this is not a duplicate.

What proBLEES THIS Feature SOLVE?

Solve the topic customization problem

What does The proposed API Look Like?

Cover the original style, simple operation is best

Violet-VE commented 2 years ago

观文档组件底下有主题变量，请问如何使用(⊙_⊙) 是还没做好功能还是没有文档(´⊙ω⊙`) 我再研究研究吧〒▽〒 @danranVm

danranVm commented 2 years ago

观文档组件底下有主题变量，请问如何使用(⊙_⊙) 是还没做好功能还是没有文档(´⊙ω⊙`) 我再研究研究吧〒▽〒 @danranVm

@Violet-VE 文档还没有补充~有两种使用方式：

直接 import idux 的 less 文件，然后覆盖掉 less 变量就好了，例如：

@import '@idux/components/style/core/reset.default.less';
@import '@idux/components/style/core/reset-scroll.default.less';
@import '@idux/components/default.less';
@import '@idux/pro/default.less';

// 表单
@form-item-label-color: #6F7785;
@form-item-label-required-color: #CF171D;

或者在编译工具中覆盖 less 变量，以 vite 为例：

export default defineConfig(async ({ mode, command }: ConfigEnv): Promise<UserConfig> => {

return {
css: {
  preprocessorOptions: {
    less: {
      globalVars: generateGlobalVars(),
      modifyVars: generateModifyVars(),
      javascriptEnabled: true,
    },
  },
},
};
});