樣式兼容

Ant Design 支持最近 2 個版本的現(xiàn)代瀏覽器。如果你需要兼容舊版瀏覽器，請根據(jù)實(shí)際需求進(jìn)行降級處理：

StyleProvider

查看 @ant-design/cssinjs.

:where 選擇器

Ant Design 的 CSS-in-JS 默認(rèn)通過 :where 選擇器降低 CSS Selector 優(yōu)先級，以減少用戶升級時額外調(diào)整自定義樣式成本。在某些場景下你如果需要支持的舊版瀏覽器（或者如 TailwindCSS 優(yōu)先級沖突），你可以使用 @ant-design/cssinjs 取消默認(rèn)的降權(quán)操作（請注意版本保持與 antd 一致）：

import { StyleProvider } from '@ant-design/cssinjs';

// `hashPriority` 默認(rèn)為 `low`，配置為 `high` 后，
// 會移除 `:where` 選擇器封裝
export default () => (
  <StyleProvider hashPriority="high">
    <MyApp />
  </StyleProvider>
);

切換后，樣式將從 :where 切換為類選擇器：

--  :where(.css-bAMboO).ant-btn {
++  .css-bAMboO.ant-btn {
      color: #fff;
    }

注意：關(guān)閉 :where 降權(quán)后，你可能需要手動調(diào)整一些樣式的優(yōu)先級。亦或者使用 PostCSS 插件提升應(yīng)用樣式的優(yōu)先級，PostCSS 提供了非常多的插件來調(diào)整優(yōu)先級，你可以自行按需選擇，例如：

• postcss-scopify
• postcss-increase-specificity
• postcss-add-root-selector

通過插件配置，將你的 css 樣式進(jìn)行提升：

--  .my-btn {
++  #root .my-btn {
      background: red;
    }

CSS 邏輯屬性

為了統(tǒng)一 LTR 和 RTL 樣式，Ant Design 使用了 CSS 邏輯屬性。例如原 margin-left 使用 margin-inline-start 代替，使其在 LTR 和 RTL 下都為起始位置間距。如果你需要兼容舊版瀏覽器（如 360 瀏覽器、QQ 瀏覽器 等等），可以通過 @ant-design/cssinjs 的 StyleProvider 配置 transformers 將其轉(zhuǎn)換：

import { StyleProvider, legacyLogicalPropertiesTransformer } from '@ant-design/cssinjs';

// `transformers` 提供預(yù)處理功能將樣式進(jìn)行轉(zhuǎn)換
export default () => (
  <StyleProvider transformers={[legacyLogicalPropertiesTransformer]}>
    <MyApp />
  </StyleProvider>
);

切換后，樣式將降級 CSS 邏輯屬性：

.ant-modal-root {
-- inset: 0;
++ top: 0;
++ right: 0;
++ bottom: 0;
++ left: 0;
}

rem 適配

在響應(yīng)式網(wǎng)頁開發(fā)中，需要一種方便且靈活的方式來實(shí)現(xiàn)頁面的適配和響應(yīng)式設(shè)計。px2remTransformer 轉(zhuǎn)換器可以快速而準(zhǔn)確地將樣式表中的像素單位轉(zhuǎn)換為相對于根元素（HTML 標(biāo)簽）的 rem 單位，實(shí)現(xiàn)頁面的自適應(yīng)和響應(yīng)式布局。

import { StyleProvider, px2remTransformer } from '@ant-design/cssinjs';

const px2rem = px2remTransformer({
  rootValue: 32, // 32px = 1rem; @default 16
});

export default () => (
  <StyleProvider transformers={[px2rem]}>
    <MyApp />
  </StyleProvider>
);

最終轉(zhuǎn)換后的樣式：

.px2rem-box {
-  width: 400px;
+  width: 12.5rem;
   background-color: green;
-  font-size: 32px;
+  font-size: 1rem;
   border: 10PX solid #f0f;
 }
 @media only screen and (max-width: 600px) {
   .px2rem-box {
     background-color: red;
-    margin: 10px;
+    margin: 0.3125rem;
   }
 }

配置項(xiàng)

詳細(xì)請參考: px2rem.ts#Options

Shadow DOM 場景

在 Shadow DOM 場景中，由于其添加 <style /> 標(biāo)簽的方式與普通 DOM 不同，所以需要使用 @ant-design/cssinjs 的 StyleProvider 配置 container 屬性用于設(shè)置插入位置：

import { StyleProvider } from '@ant-design/cssinjs';
import { createRoot } from 'react-dom/client';

const shadowRoot = someEle.attachShadow({ mode: 'open' });
const container = document.createElement('div');
shadowRoot.appendChild(container);
const root = createRoot(container);

root.render(
  <StyleProvider container={shadowRoot}>
    <MyApp />
  </StyleProvider>,
);