# antd-theme

全局样式

# Feature

## antd.theme.less

📝 新增 antd.theme.mini.less 对应云助手 mini 版

antd 主题变量统一更改。

提供给 vue.config.js 全局引入

```js
//...
css: {
  loaderOptions: {
    less: {
      lessOptions: {
        modifyVars: {
          hack: `true; @import "@kt/unity-antd-theme/src/antd.theme.less";`
        },
        javascriptEnabled: true
      }
    }
  }
},
//...
```

## g.less

📝 新增 g.less 对应云助手 mini 版

antd 的一些不能使用变量更改的，只是直接更改样式的。

提供给 App.vue 全局引入

```
//...
<style lang="less">
@import '@kt/unity-antd-theme/src/g.less';
</style>
//...
```

# 注意

- 修改了全局滚动条的样式，如果有影响到项目的其他自定义滚动条，请这样子定义覆盖

全局样式

```css
/* 滚动条宽高 */
::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
/* 轨道背景 */
::-webkit-scrollbar-track {
  background-color: #f9f9f9;
}
/* 滚动块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  border-style: dashed;
  border-color: transparent;
  border-width: 2px;
  background-color: rgba(124, 124, 124, 0.3);
  background-clip: padding-box;
}
/* 滚动块hover */
::-webkit-scrollbar-thumb:hover {
  background: rgba(124, 124, 124, 1);
}
```

覆盖全局样式

eg：class 为 .foo 的 div

```less
.foo {
  &::-webkit-scrollbar {
    height: 8px;
    width: 8px;
  }
  // ✨ 轨道颜色修改为透明
  &::-webkit-scrollbar-track {
    background-color: transparent;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    border-style: dashed;
    border-color: transparent;
    border-width: 2px;
    background-color: rgba(124, 124, 124, 0.3);
    background-clip: padding-box;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: rgba(124, 124, 124, 1);
  }
}
```

- select-item 默认溢出隐藏，如果需要进行换行，请添加 dropdownClassName 的 class `select-item-break-word`

```ts
<a-select dropdownClassName="select-item-break-word">...</a-select>
```
