mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-11 06:45:20 +08:00
63 lines
1.9 KiB
Markdown
63 lines
1.9 KiB
Markdown
---
|
|
order: 6.5
|
|
title: CSS Compatible
|
|
---
|
|
|
|
Ant Design supports the last 2 versions of modern browsers. If you need to be compatible with legacy browsers, please perform downgrade processing according to actual needs:
|
|
|
|
### Compatible adjustment
|
|
|
|
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, 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`
|
|
// Which will remove `:where` wrapper
|
|
export default () => (
|
|
<StyleProvider hashPriority="high">
|
|
<MyApp />
|
|
</StyleProvider>
|
|
);
|
|
```
|
|
|
|
It will turn `:where` to class selector:
|
|
|
|
```diff
|
|
-- :where(.css-bAMboO).ant-btn {
|
|
++ .css-bAMboO.ant-btn {
|
|
color: #fff;
|
|
}
|
|
```
|
|
|
|
Note: After turning off the `:where` downgrade, you may need to manually adjust the priority of some styles.
|
|
|
|
### 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
|
|
export default () => (
|
|
<StyleProvider transformers={[legacyLogicalPropertiesTransformer]}>
|
|
<MyApp />
|
|
</StyleProvider>
|
|
);
|
|
```
|
|
|
|
When toggled, styles will downgrade CSS logical properties:
|
|
|
|
```diff
|
|
.ant-modal-root {
|
|
-- inset: 0;
|
|
++ top: 0;
|
|
++ right: 0;
|
|
++ bottom: 0;
|
|
++ left: 0;
|
|
}
|
|
```
|