在项目开发中使用 ant design 组件的注意事项

在项目开发中使用组件库是很普遍的需求，我平时最常用的组件库是 ant design。在此记录使用 ant design 组件需要注意的细节和遇到的问题，以及相应的解决方案。

ColorPicker 颜色选择器

提供颜色选取的组件，自 5.5.0 版本开始提供该组件。

import { useState } from 'react'
import { Button, ColorPicker, Space, Tooltip } from 'antd'

export default function ColorPickerDemo() {
  const [color, setColor] = useState('')
  const [disabledAlphaColor, setDisabledAlphaColor] = useState('')

  return (
    <Space direction="vertical">
      <Space>
        <Tooltip title="启用透明度">
          <ColorPicker value={color} onChange={(value) => setColor(value.toHexString())} />
        </Tooltip>
        <Button>{color}</Button>
      </Space>

      <Space>
        <Tooltip title="禁用透明度">
          <ColorPicker
            value={disabledAlphaColor}
            disabledAlpha
            onChange={(value) => setDisabledAlphaColor(value.toHexString())}
          />
        </Tooltip>
        <Button>{disabledAlphaColor}</Button>
      </Space>
    </Space>
  )
}

ColorPicker 默认带有透明度选项（toHexString()后为八值十六进制字符），但在有些情况下透明度可能不被支持，因此可以设置 disabledAlpha 属性禁用透明度。

简单的文字提示气泡框。

import React, { useRef } from 'react'
import { Button, Space, Tooltip } from 'antd'

export default function TooltipDemo() {
  const fullScreenRef = useRef(null)

  const handleFullScreen = () => {
    fullScreenRef.current?.requestFullscreen()
  }

  return (
    <Space>
      <Button type="primary" onClick={handleFullScreen}>
        全屏
      </Button>
      <Space ref={fullScreenRef} className="flex items-center justify-center">
        <Tooltip title="渲染到body上">
          <Button>鼠标移入</Button>
        </Tooltip>
        <Tooltip
          title="渲染到指定元素上"
          getPopupContainer={() => fullScreenRef.current ?? document.body}
        >
          <Button>鼠标移入</Button>
        </Tooltip>
      </Space>
    </Space>
  )
}

大多数情况下 Tooltip 的显示效果都没问题，但开发中遇到当父元素进入全屏状态时，Tooltip 就无法正常显示（Popconfirm、Popover 同理）。

问题原因：Tooltip 默认渲染到 body 上，当元素全屏时将被遮挡。

解决办法：设置 getPopupContainer 属性，将浮层渲染到父元素。

样式与 TailwindCSS 优先级冲突

Ant Design 的 CSS-in-JS 默认通过 :where 选择器降低 CSS Selector 优先级，以减少用户升级时额外调整自定义样式的成本，不过 :where 语法的兼容性在低版本浏览器比较差。

在某些场景下你如果需要支持旧版浏览器（或者如 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 {
  color: #fff;
}
++.css-bAMboO.ant-btn {
  color: #fff;
}

ColorPicker 颜色选择器

Tooltip 文字提示

样式与 TailwindCSS 优先级冲突