a react component library base on arco design
基础包
pnpm add @arco-design/web-react @arco-plugins/vite-react
主题包,例如 @arco-themes/react-easytwin
pnpm add @arco-themes/react-easytwin
以 vite 为例
配置 vite.config.ts
import { vitePluginForArco } from '@arco-plugins/vite-react';
export default defineConfig({
// ...
plugins: [
// ...
vitePluginForArco({
theme: '@arco-themes/react-easytwin',
}),
],
});
如果是应用的暗色主题,请在 index.html
的 body 上添加 arco-theme="dark"
,如果是亮色的,可以不加。
可以统一在 components
目录下新建一个 ui.ts
文件,这个文件的主要作用就是从 @easyv/react-components
中导入组件并导出
export { Input } from '@easyv/react-components';
这样方便统一管理,后面如果要迁移组件库,只需要修改这个文件即可。
注意:不要引 @arco-design/web-react
,这是依赖的基础库,但不是直接使用的库。@easyv/react-components
会基于它做一些定制。
TODO
# install dependencies
$ pnpm install
# develop library by docs demo
$ pnpm start
# build library source code
$ pnpm run build
# build library source code in watch mode
$ pnpm run build:watch
# build docs
$ pnpm run docs:build
# check your project for potential problems
$ pnpm run doctor
- radius 没有应用四种尺寸
- select 下的 tag 颜色没有应用对
- input disabled background-color 优先级问题
- radio 中心点的样式 为 color-white 暗色模式下 为透明色,应该为白色,文档中为 hsla(0,0%,100%,0.9),实际配置 rgba(255,255,255,0)
- input 聚焦的输入框圆角问题
MIT