2.0 KiB
2.0 KiB
| name | description |
|---|---|
| jjb-theme-color-variables | 定义 JJB 主题色变量配置规范。在使用 @colorPrimary、process.env.app.antd、jjb.config.js framework 配置时查阅。 |
环境变量与数据访问
主题色变量
-
Less 文件:使用
@colorPrimary变量 -
JSX 内联样式:使用
process.env.app.antd['colorPrimary']变量 -
配置来源:主题色配置来源于根目录
jjb.config.js文件中的framework属性 -
ant-prefix(类名前缀):framework.antd['ant-prefix']会注入为process.env.app.antd['ant-prefix'],并在Container的ConfigProvider上作为prefixCls使用。antd 组件 DOM 类名为${ant-prefix}-*,不是默认的ant-*。在 Less/CSS 中覆盖 antd 内部样式时不得使用.ant-选择器,详见应用标识符与路由配置中「Ant Design 类名前缀」。 -
配置结构:
// jjb.config.js { framework: { antd: { 'ant-prefix': 'app-open-maic', // 示例:常与 appIdentifier 对应为 app-${appIdentifier} colorPrimary: '#1890ff' } } } -
访问方式:在 JSX 代码中通过
process.env.app.antd['colorPrimary']即可访问配置的主题色值 -
扩展支持:
framework.antd配置支持扩展其他 Less 变量,可在jjb.config.js中配置任意 antd 主题变量-
配置示例:
// jjb.config.js { framework: { antd: { colorPrimary: '#1890ff', borderRadius: 6, colorSuccess: '#52c41a', // 可扩展其他 antd 主题变量 } } } -
Less 文件使用:配置的变量会自动注入为 Less 变量,在
.less文件中可直接使用@colorPrimary、@borderRadius等变量 -
JSX 内联样式使用:通过
process.env.app.antd['变量名']访问扩展的变量
-