样式兼容

Namu Design 支持最近 2 个版本的现代浏览器。如果你需要兼容旧版浏览器，请根据实际需求进行降级处理：

StyleProvider

查看 @ant-design/cssinjs.

`:where` 选择器

Namu Design 的 CSS-in-JS 默认通过 :where 选择器降低 CSS Selector 优先级，以减少用户升级时额外调整自定义样式成本。在某些场景下你如果需要支持的旧版浏览器（或者如 TailwindCSS 优先级冲突），你可以使用 @ant-design/cssinjs 取消默认的降权操作（请注意版本保持与 antd 一致）：

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

// `hashPriority` 默认为 `low`，配置为 `high` 后，
// 会移除 `:where` 选择器封装
export default () => (
  <StyleProvider hashPriority="high">
    <MyApp />
  </StyleProvider>
);

切换后，样式将从 :where 切换为类选择器：

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

注意：关闭 :where 降权后，你可能需要手动调整一些样式的优先级。亦或者使用 PostCSS 插件提升应用样式的优先级，PostCSS 提供了非常多的插件来调整优先级，你可以自行按需选择，例如：

通过插件配置，将你的 css 样式进行提升：

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

CSS 逻辑属性

为了统一 LTR 和 RTL 样式，Namu Design 使用了 CSS 逻辑属性。例如原 margin-left 使用 margin-inline-start 代替，使其在 LTR 和 RTL 下都为起始位置间距。如果你需要兼容旧版浏览器（如 360 浏览器、QQ 浏览器等等），可以通过 @ant-design/cssinjs 的 StyleProvider 配置 transformers 将其转换：

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

// `transformers` 提供预处理功能将样式进行转换
export default () => (
  <StyleProvider transformers={[legacyLogicalPropertiesTransformer]}>
    <MyApp />
  </StyleProvider>
);

切换后，样式将降级 CSS 逻辑属性：

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

rem 适配

在响应式网页开发中，需要一种方便且灵活的方式来实现页面的适配和响应式设计。px2remTransformer 转换器可以快速而准确地将样式表中的像素单位转换为相对于根元素（HTML 标签）的 rem 单位，实现页面的自适应和响应式布局。

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

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

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

最终转换后的样式：

.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;
   }
 }

配置项

参数	说明	类型	默认值
rootValue	根元素字体大小	`number`	16
precision	转换后的小数点位数	`number`	5
mediaQuery	是否转换媒体查询中的 px	`boolean`	false

详细请参考: px2rem.ts#Options

Shadow DOM 场景

在 Shadow DOM 场景中，由于其添加 <style /> 标签的方式与普通 DOM 不同，所以需要使用 @ant-design/cssinjs 的 StyleProvider 配置 container 属性用于设置插入位置：

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>,
);

样式兼容

样式兼容

StyleProvider

:where 选择器

CSS 逻辑属性

rem 适配

配置项

Shadow DOM 场景

StyleProvider

:where 选择器

CSS 逻辑属性

rem 适配

配置项

Shadow DOM 场景

`:where` 选择器

`:where` 选择器