test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 03:59:01 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

docs: add notice (#40354)

Browse Source
This commit is contained in:
lijianan 2023-01-21 12:37:10 +08:00 committed by GitHub
parent 467741f558
commit 169ed5efa0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
docs/react/customize-theme.en-US.md
View File

@ -21,8 +21,8 @@ In version 5.0 we call the smallest element that affects the theme **Design Toke
You can pass `theme` to ConfigProvider to customize theme. After migrate to V5, theme of V5 will be applied by default. Here's a simple example:
```tsx
import { Button, ConfigProvider } from 'antd';
import React from 'react';
import { ConfigProvider, Button } from 'antd';
const App: React.FC = () => (
<ConfigProvider
@ -48,8 +48,8 @@ You will get a theme with primary color <ColorChunk color="#00b96b" /></ColorChu
Themes with different styles can be quickly generated by modifying `algorithm`. Ant Design 5.0 provides three sets of preset algorithms by default, which are default algorithm `theme.defaultAlgorithm`, dark algorithm `theme.darkAlgorithm` and compact algorithm `theme.compactAlgorithm`. You can switch algorithms by modifying the `algorithm` property of `theme` in ConfigProvider.
```tsx
import { Button, ConfigProvider, theme } from 'antd';
import React from 'react';
import { ConfigProvider, Button, theme } from 'antd';
const App: React.FC = () => (
<ConfigProvider
@ -69,8 +69,8 @@ export default App;
In addition to Design Token, each component will also have its own Component Token to achieve style customization capabilities for components, and different components will not affect each other. Similarly, other Design Token of components can also be overridden in this way.
```tsx
import { Checkbox, ConfigProvider, Radio } from 'antd';
import React from 'react';
import { ConfigProvider, Radio, Checkbox } from 'antd';
const App: React.FC = () => (
<ConfigProvider
@ -94,6 +94,8 @@ In this way, we changed the primary color of Radio to <ColorChunk color="#00b96b
![component token](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*EMY0QrHFDjsAAAAAAAAAAAAAARQnAQ)
> Notice: `ConfigProvider` will not take effect on static methods such as `message.xxx`, `Modal.xxx`, `notification.xxx`, because in these methods, antd will dynamically create new ones through `ReactDOM.render` React entities. Its context is not the same as the context of the current code, so context information cannot be obtained. When you need context information (such as the content configured by ConfigProvider), you can use the `Modal.useModal` method to return the modal entity and the contextHolder node. Just insert it where you need to get the context, or you can use [App Component](/components/app) to simplify the problem of usingModal and other methods that need to manually implant the contextHolder.
## Other Ways to Use Dynamic Themes
### Switch Themes Dynamically
@ -105,8 +107,8 @@ In v5, dynamically switching themes is very simple for users, you can dynamicall
By nesting `ConfigProvider` you can apply local theme to some parts of your page. Design Tokens that have not been changed in the child theme will inherit the parent theme.
```tsx
import { Button, ConfigProvider } from 'antd';
import React from 'react';
import { ConfigProvider, Button } from 'antd';
const App: React.FC = () => (
<ConfigProvider
@ -137,8 +139,8 @@ export default App;
If you want to consume the Design Token under the current theme, we provide `useToken` hook to get Design Token.
```tsx
import React from 'react';
import { Button, theme } from 'antd';
import React from 'react';
const { useToken } = theme;
@ -245,9 +247,8 @@ Please ref to [CSS Compatible](/docs/react/compatible-style).
Use `@ant-design/cssinjs` to extract style:
```tsx
import React from 'react';
import { renderToString } from 'react-dom/server';
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
import { renderToString } from 'react-dom/server';
export default () => {
// SSR Render
@ -282,9 +283,8 @@ export default () => {
Since `<style />` tag insertion is different from normal DOM in Shadow DOM scenario, you need to use `StyleProvider` of `@ant-design/cssinjs` to configure the `container` property to set the insertion position:
```tsx
import React from 'react';
import { createRoot } from 'react-dom/client';
import { StyleProvider } from '@ant-design/cssinjs';
import { createRoot } from 'react-dom/client';
const shadowRoot = someEle.attachShadow({ mode: 'open' });
const container = document.createElement('div');

18
docs/react/customize-theme.zh-CN.md
View File

@ -21,8 +21,8 @@ Ant Design 设计规范和技术上支持灵活的样式定制，以满足业务
通过在 ConfigProvider 中传入 `theme`，可以配置主题。在升级 v5 后，将默认使用 v5 的主题，以下是将配置主题示例：
```tsx
import { Button, ConfigProvider } from 'antd';
import React from 'react';
import { ConfigProvider, Button } from 'antd';
const App: React.FC = () => (
<ConfigProvider
@ -48,8 +48,8 @@ export default App;
通过修改算法可以快速生成风格迥异的主题，5.0 版本中默认提供三套预设算法，分别是默认算法 `theme.defaultAlgorithm`、暗色算法 `theme.darkAlgorithm` 和紧凑算法 `theme.compactAlgorithm`。你可以通过修改 ConfigProvider 中 `theme` 属性的 `algorithm` 属性来切换算法。
```tsx
import { Button, ConfigProvider, theme } from 'antd';
import React from 'react';
import { ConfigProvider, Button, theme } from 'antd';
const App: React.FC = () => (
<ConfigProvider
@ -69,8 +69,8 @@ export default App;
除了整体的 Design Token，各个组件也会开放自己的 Component Token 来实现针对组件的样式定制能力，不同的组件之间不会相互影响。同样地，也可以通过这种方式来覆盖组件的其他 Design Token。
```tsx
import { Checkbox, ConfigProvider, Radio } from 'antd';
import React from 'react';
import { ConfigProvider, Radio, Checkbox } from 'antd';
const App: React.FC = () => (
<ConfigProvider
@ -94,6 +94,8 @@ export default App;
![component token](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*EMY0QrHFDjsAAAAAAAAAAAAAARQnAQ)
> 注意：`ConfigProvider` 对 `message.xxx`、`Modal.xxx`、`notification.xxx` 等静态方法不会生效，原因是在这些方法中，antd 会通过 `ReactDOM.render` 动态创建新的 React 实体。其 context 与当前代码所在 context 并不相同，因而无法获取 context 信息。当你需要 context 信息（例如 ConfigProvider 配置的内容）时，可以通过 `Modal.useModal` 方法会返回 modal 实体以及 contextHolder 节点。将其插入到你需要获取 context 位置即可，也可通过 [App 包裹组件](/components/app-cn) 简化 useModal 等方法需要手动植入 contextHolder 的问题。
## 动态主题的其他使用方式
### 动态切换
@ -105,8 +107,8 @@ export default App;
可以嵌套使用 `ConfigProvider` 来实现局部主题的更换。在子主题中未被改变的 Design Token 将会继承父主题。
```tsx
import { Button, ConfigProvider } from 'antd';
import React from 'react';
import { ConfigProvider, Button } from 'antd';
const App: React.FC = () => (
<ConfigProvider
@ -137,8 +139,8 @@ export default App;
如果你希望使用当前主题下的 Design Token，我们提供了 `useToken` 这个 hook 来获取 Design Token。
```tsx
import React from 'react';
import { Button, theme } from 'antd';
import React from 'react';
const { useToken } = theme;
@ -241,9 +243,8 @@ const theme = {
使用 `@ant-design/cssinjs` 将所需样式抽离：
```tsx
import React from 'react';
import { renderToString } from 'react-dom/server';
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
import { renderToString } from 'react-dom/server';
export default () => {
// SSR Render
@ -282,9 +283,8 @@ export default () => {
在 Shadow DOM 场景中，由于其添加 `<style />` 标签的方式与普通 DOM 不同，所以需要使用 `@ant-design/cssinjs` 的 `StyleProvider` 配置 `container` 属性用于设置插入位置：
```tsx
import React from 'react';
import { createRoot } from 'react-dom/client';
import { StyleProvider } from '@ant-design/cssinjs';
import { createRoot } from 'react-dom/client';
const shadowRoot = someEle.attachShadow({ mode: 'open' });
const container = document.createElement('div');