将 aria-role 传递给 Material UI <Icon> 组件答案

【问题标题】：Passing aria-role to Material UI <Icon> component将 aria-role 传递给 Material UI <Icon> 组件
【发布时间】：2021-01-23 20:57:57
【问题描述】：

我目前正在使用 Material UI 的 <Icon /> 组件。 Material UI 的文档在本文中提到了通过role="img" 的能力：https://material-ui.com/components/icons/#semantic-svg-icons 但我认为它仅适用于<SvgIcon />。有没有人幸运地将这些道具传递给<Icon /> 组件？

这是我正在使用的示例代码。

import React from 'react';
import { Icon } from '@material-ui/core';

export interface IconProps {
  icon: string;
}

export const SampleIcon = ({icon = 'home'}: IconProps) => {
  return (
    <Icon
      aria-hidden="false"
      aria-label="Sample Icon"
      component="span"
      role="img"
      title="Sample Icon">
        {icon}
    </Icon>
  );
});

【问题讨论】：

仅供参考，您可以在IconProps 上将icon 设为可选。否则设置默认值是没有意义的。
这是从我的演示应用程序中带来的，它允许用户添加他们自己的图标，这就是我有一个默认值的原因。我的应用程序中的其他任何地方都没有默认值，它是必需的。

标签： reactjs typescript material-ui wai-aria

【解决方案1】：

您的代码没有任何问题。 Icon 接受所有可分配给任何 DOM 元素的标准 JSX 属性，包括 role。

您的代码输出以下 HTML：

<span class="material-icons MuiIcon-root" aria-hidden="false" aria-label="Sample Icon" role="img" title="Sample Icon">star</span>

【讨论】：

奇怪，我再看看，如果可行的话，我会接受