这个感觉有点水文章了。其实就是一个调色板常量
- 通过不同的配置修改主题（如建立一个theme.tsx的context）
- 可以实现颜色统一，未来修改页面时可以做到统一修改
interface GlobalColorPalatte {
/** 主色 */
primaryColor:string;
/** 图表用色 */
mainColor:string[];
/** 背景颜色 */
backgroundColor: string[];
/** 高亮颜色 */
highlightColor: string[];
/** border颜色 */
borderColor: string[];
// ....
}
export const globalColorPalatte: GlobalColorPalatte = {
// ...
}
然后在任何需要用到颜色的地方使用就可以。
有人会问，如果在css、less、sass中如何使用呢？当然是针对不同的预处理的特定定义常量。
我这里能这样用，是因为个人比较推崇 style-components，组件自带样式
