Skip to content

Commit

Permalink
docs: update config-provider
Browse files Browse the repository at this point in the history
  • Loading branch information
JeromeLin committed Apr 11, 2023
1 parent 1f02b1d commit 4505375
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 20 deletions.
34 changes: 14 additions & 20 deletions packages/site/web/docs/customize-theme.md
Expand Up @@ -9,40 +9,34 @@ Zarm 提供了一个 React 组件 [ConfigProvider](#/components/config-provider)
目前的默认的品牌标准色是 `#00bc70`,如果需要使用其他颜色,可以参考下面的方案。

```jsx
return (
<ConfigProvider primaryColor="#1890ff">
<App />
</ConfigProvider>
);
<ConfigProvider primaryColor="#1890ff">
<App />
</ConfigProvider>
```

## 暗黑主题

除了目前提供的默认主题外,我们还提供了一套暗黑主题,可以参考下面的方案进行配置。

```jsx
return (
<ConfigProvider theme="dark">
<App />
</ConfigProvider>
);
<ConfigProvider theme="dark">
<App />
</ConfigProvider>
```

## 深度定制

可以通过修改 zarm 开放出来的 css 变量的方式深度定制你的样式。

```jsx
return (
<ConfigProvider
cssVars={{
'--za-theme-primary': '#ff0000',
'--za-rate-active-color': '#fa541b',
}}
>
<App />
</ConfigProvider>
);
<ConfigProvider
cssVars={{
'--za-theme-primary': '#ff0000',
'--za-rate-active-color': '#fa541b',
}}
>
<App />
</ConfigProvider>
```

通用变量可以在 <a href="https://github.com/ZhongAnTech/zarm/blob/master/packages/zarm/src/style/themes/default.scss" target="_blank">这里</a> 找到,组件级别的变量可在对应组件文档中查找。
1 change: 1 addition & 0 deletions packages/site/web/docs/i18n.md
Expand Up @@ -7,6 +7,7 @@ Zarm 目前的默认文案是中文,如果需要使用其他语言,可以参
Zarm 提供了一个 React 组件 [ConfigProvider](#/components/config-provider) 用于全局配置国际化文案。

```jsx
import { ConfigProvider } from 'zarm';
import zhCN from 'zarm/lib/config-provider/locale/zh_CN';

return (
Expand Down

0 comments on commit 4505375

Please sign in to comment.