Typescript 脉轮ui打字脚本强制执行图标按钮的咏叹调标签如何关闭

发布于04月19日

所以我有一个脉轮UI图标按钮

<IconButton
   aria-label="Left Arrow"

我想删除咏叹调标签--我为什么要这样做？因为IconButton位于树的aria-hidden部分内，因此标签是多余的.

但如果我删除它，我会收到以下类型脚本投诉

 ../../node_modules/@chakra-ui/button/dist/icon-button.d.ts:23:5
web:tsc:     23     "aria-label": string;
web:tsc:            ~~~~~~~~~~~~
web:tsc:     '"aria-label"' is declared here.

我怎样才能制作脉轮图标按钮，而不会给它添加不必要的咏叹调标签.

推荐答案

我们来看看source code换<IconButton />？

"use client"

import { forwardRef } from "react"
import { Button, ButtonProps } from "./button"

export interface IconButtonProps extends ButtonProps {
  /**
   * A11y: A label that describes the button
   */
  "aria-label": string
}

/**
 * Icon button renders an icon within a button.
 *
 * @see Docs https://chakra-ui.com/docs/components/icon-button
 */
export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
  function IconButton(props, ref) {
    return <Button padding="0" ref={ref} {...props} />
  },
)

IconButton.displayName = "IconButton"

本质上，IconButton只是一个Button，带有一个强制性的额外props aria-label和强制性的padding=0.正如您所看到的，它没有自己的变体、风格或任何东西.因此，如果您不喜欢aria-label，您可以简单地使用Button并带有填充=0.