Ant Design 支持最近 2 個版本的現(xiàn)代瀏覽器。如果你需要兼容舊版瀏覽器,請根據(jù)實(shí)際需求進(jìn)行降級處理:
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)先級,你可以自行按需選擇,例如:
通過插件配置,將你的 css 樣式進(jìn)行提升:
-- .my-btn {++ #root .my-btn {background: red;}
為了統(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;}
在響應(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;}}
參數(shù) | 說明 | 類型 | 默認(rèn)值 |
---|---|---|---|
rootValue | 根元素字體大小 | number
|
16 |
precision | 轉(zhuǎn)換后的小數(shù)點(diǎn)位數(shù) | number
|
5 |
mediaQuery | 是否轉(zhuǎn)換媒體查詢中的 px | boolean
|
false |
詳細(xì)請參考: px2rem.ts#Options
在 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>,);
更多建議: