createInstance - 创建实例方法

arvinxx commented 1 year ago

使用 createInstance 可以创建另一组样式实例方法。对于应用样式方案来说这个方法基本用不到。但对于组件研发的场景则非常必要。

创建样式实例

为组件创建自己的样式实例，这样当使用组件库时可自动获得一套配置好默认值的样式方法。

import { createInstance } from 'antd-style';

interface DefaultToken {
  accessColor: string;
}

const styleInstance = createInstance<DefaultToken>({
  // **** 样式生成相关 **** //

  key: 'abc', // 设定生成 hash 类名的前缀，结果为 .abc-xxxx
  speedy: false, // 目前的 cssinjs 方案中默认的 cssom 的插入方式与 qiankun 微应用兼容性都不太理想，所以建议关闭
  hashPriority: 'low', // 将生成 hash 的样式选择器设为 :where 选择器降低权重。这样可以让用户自定义的样式覆盖组件的样式

  // ***** 主题相关 ***** //

  // 配置默认传给 ThemeProvider 的 props，而该 Provider 同样可以被外部覆盖 props
  // 配置后的值也会成为相关方法消费的默认值，这样一来不需要包裹 ThemeProvider 即可消费到默认值
  ThemeProvider: {
    prefixCls: 'tna', // 设定 antd 组件的 类名前缀，例如 Button 的类型将会是 .tna-btn
  },
});

export const {
  // **** 核心样式方法 **** //

  createStyles,
  createStyish,
  createGlobalStyle,

  // **** 基础样式方法 **** //
  cx,
  css,
  keyframes,

  //****  样式表管理  **** //
  cache,
  sheet,
  flush,
  merge,
  hydrate,
  getRegisteredStyles,

  // ****  数据容器   **** //
  StyleProvider,
  ThemeProvider,
  useTheme,
} = styleInstance;

github-actions[bot] commented 1 year ago

🎊 PR Preview 0f46ecabeb6e83521d4d11f7aaf3a88dbedac4f4 has been successfully built and deployed to https://ant-design-antd-style-preview-pr-17.surge.sh

:clock1: Build time: 83.141s

_{🤖 By surge-preview}

github-actions[bot] commented 1 year ago

:tada: This PR is included in version 3.0.0-alpha.51 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

github-actions[bot] commented 1 year ago

:tada: This PR is included in version 3.0.0-beta.1 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

ant-design / antd-style

createInstance - 创建实例方法 #17

创建样式实例