将辅助功能属性传递给 Material UI 按钮

Question

我想向Material UI Button添加辅助功能。

我希望按如下方式使用此自定义按钮：

import Button from '@material-ui/core/Button';

function AccessibleButton(props) {
  const { accessKey, ariaLabel, isDisabled, label, onClick, tabIndex, variant, size} = props;
  return (
    <Button
      accesskey={accessKey}
      aria-label={ariaLabel}
      disabled={isDisabled}
      className={componentCls}
      onClick={onClick}
      tabindex={tabIndex}
      variant={variant}
      size={size}
    >
      {label}
    </Button>
  );
};

Aria 标签可用于input，但似乎不适用于按钮。如何将附加属性（accessKey、ariaLabel）传递到 Material UI 按钮中。我该怎么做呢？

Answer 1

这应该可行，因为我们的大多数组件都会转发多余的 props。在相应的 api 页面（此处为https://material-ui.com/api/button/）上，您将找到一个包含明显属性的表格。下面有一条注释，告诉您多余的道具会发生什么。

导航起来有点困难（我们正在努力解决），但最终您会看到多余的 props 被转发到原生元素。所以<Button aria-label="ariaLabel" />会渲染一个<button aria-label="ariaLabel" />.