docs: postcss adv (#42260)

docs/react/compatible-style.en-US.md

@@ -10,7 +10,6 @@ Ant Design supports the last 2 versions of modern browsers. If you need to be co
 Ant Design default using CSS-in-JS with `:where` Selector to reduce priority to avoid user additional adjust style cost when updating. If you want to support old browser (or some other CSS framework selector priority conflict like TailwindCSS), you can use `@ant-design/cssinjs` to adjust this behavior (Please note keep version align with antd):
 
 ```tsx
-import React from 'react';
 import { StyleProvider } from '@ant-design/cssinjs';
 
 // Config `hashPriority` to `high` instead of default `low`
@@ -31,14 +30,26 @@ It will turn `:where` to class selector:
     }
 ```
 
-Note: After turning off the `:where` downgrade, you may need to manually adjust the priority of some styles.
+Note: After turning off the `:where` downgrade, you may need to manually adjust the priority of some styles. Or you can **use PostCSS plugin** to raise application css selector priority. PostCSS provides many plugins can help on this. e.g:
+
+- [postcss-scopify](https://www.npmjs.com/package/postcss-scopify)
+- [postcss-increase-specificity](https://www.npmjs.com/package/postcss-increase-specificity)
+- [postcss-add-root-selector](https://www.npmjs.com/package/postcss-add-root-selector)
+
+Raise priority through plugin:
+
+```diff
+--  .my-btn {
+++  #root .my-btn {
+      background: red;
+    }
+```
 
 ### CSS Logical Properties
 
 To unify LTR and RTL styles, Ant Design uses CSS logical properties. For example, the original `margin-left` is replaced by `margin-inline-start`, so that it is the starting position spacing under both LTR and RTL. If you need to be compatible with older browsers, you can configure `transformers` through the `StyleProvider` of `@ant-design/cssinjs`:
 
 ```tsx
-import React from 'react';
 import { StyleProvider, legacyLogicalPropertiesTransformer } from '@ant-design/cssinjs';
 
 // `transformers` provides a way to transform CSS properties

docs/react/compatible-style.zh-CN.md

@@ -10,7 +10,6 @@ Ant Design 支持最近 2 个版本的现代浏览器。如果你需要兼容旧
 Ant Design 的 CSS-in-JS 默认通过 `:where` 选择器降低 CSS Selector 优先级，以减少用户升级时额外调整自定义样式成本。在某些场景下你如果需要支持的旧版浏览器（或者如 TailwindCSS 优先级冲突），你可以使用 `@ant-design/cssinjs` 取消默认的降权操作（请注意版本保持与 antd 一致）：
 
 ```tsx
-import React from 'react';
 import { StyleProvider } from '@ant-design/cssinjs';
 
 // `hashPriority` 默认为 `low`，配置为 `high` 后，
@@ -31,14 +30,26 @@ export default () => (
     }
 ```
 
-注意：关闭 `:where` 降权后，你可能需要手动调整一些样式的优先级。
+注意：关闭 `:where` 降权后，你可能需要手动调整一些样式的优先级。亦或者**使用 PostCSS 插件**提升应用样式的优先级，PostCSS 提供了非常多的插件来调整优先级，你可以自行按需选择，例如：
+
+- [postcss-scopify](https://www.npmjs.com/package/postcss-scopify)
+- [postcss-increase-specificity](https://www.npmjs.com/package/postcss-increase-specificity)
+- [postcss-add-root-selector](https://www.npmjs.com/package/postcss-add-root-selector)
+
+通过插件配置，将你的 css 样式进行提升：
+
+```diff
+--  .my-btn {
+++  #root .my-btn {
+      background: red;
+    }
+```
 
 ### CSS 逻辑属性
 
 为了统一 LTR 和 RTL 样式，Ant Design 使用了 CSS 逻辑属性。例如原 `margin-left` 使用 `margin-inline-start` 代替，使其在 LTR 和 RTL 下都为起始位置间距。如果你需要兼容旧版浏览器（如 360 浏览器、QQ 浏览器 等等），可以通过 `@ant-design/cssinjs` 的 `StyleProvider` 配置 `transformers` 将其转换：
 
 ```tsx
-import React from 'react';
 import { StyleProvider, legacyLogicalPropertiesTransformer } from '@ant-design/cssinjs';
 
 // `transformers` 提供预处理功能将样式进行转换