时间戳

首页 > 解决方案 > 将 aria-role 传递给 Material UI零件

reactjs - 将 aria-role 传递给 Material UI零件

问题描述

我目前正在使用 Material UI 的<Icon />组件。role="img"Material UI 的文档在这篇文章中提到了通过的能力： 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>
  );
});

标签： reactjstypescriptmaterial-uiwai-aria

解决方案

您拥有的代码没有任何问题。 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>

推荐阅读