jquery ui css 变量

在开发组件时, 有时需要用到jquery ui里定义的颜色。 Enhancer 在组件页面提供了下面这些和 jquery ui 相关的 css 变量:

  --ui-widget-ui-widget-content-border-color: 238, 238, 238;
  --ui-widget-content-border-color: 238, 238, 238;
  --ui-widget-content-background-color: 255, 255, 255;
  --ui-widget-content-color: 51, 51, 51;
  --ui-widget-header-border-color: 238, 238, 238;
  --ui-widget-header-background-color: 255, 255, 255;
  --ui-widget-header-color: 51, 51, 51;
  --ui-state-default-border-color: 238, 238, 238;
  --ui-state-default-background-color: 246, 246, 246;
  --ui-state-default-color: 69, 69, 69;
  --ui-state-hover-border-color: 204, 204, 204;
  --ui-state-hover-background-color: 237, 237, 237;
  --ui-state-hover-color: 43, 43, 43;
  --ui-state-active-border-color: 0, 115, 234;
  --ui-state-active-background-color: 0, 115, 234;
  --ui-state-active-color: 255, 255, 255;
  --ui-state-highlight-border-color: 255, 250, 144;
  --ui-state-highlight-background-color: 255, 250, 144;
  --ui-state-highlight-color: 119, 118, 32;
  --ui-state-error-border-color: 241, 168, 153;
  --ui-state-error-background-color: 253, 223, 223;
  --ui-state-error-color: 95, 63, 63;
  --ui-widget-overlay-background-color: 170, 170, 170;
  --ui-widget-shadow-color: 102, 102, 102;
  --ui-state-primary: 102, 102, 102;
  --ui-state-secondary: 102, 102, 102;
  --ui-icon-color: 102, 102, 102;

使用方法

.class {
  border-corlor: rgb(var(--ui-state-default-border-color));
  background-corlor: rgb(var(--ui-state-default-background-color));
  color: rgb(var(--ui-state-default-corlor));
}

// 或者

.class {
  border-corlor: rgba(var(--ui-state-default-border-color), 0.5);
  background-corlor: rgba(var(--ui-state-default-background-color), 0.5);
  color: rgba(var(--ui-state-default-color), 0.5);
}

特别注意

1. 如果组件使用到了这些 jquery ui 变量, 为了兼容 IE, 你需要把 webpack.config.js 里的 styleLoaderOptions 的两个被注释的属性打开
2. 如果你有其他 link 或 style 标签 需要用 css 变量, 但这些标签里的内容是不会经过本组件的 webpack 打包, 为了兼容 IE, 你可以像下面这样来转换:

   Enhancer.CssVar.bind('标签的 dom 对象', '组件名')