文章/答案/技术大牛

发布

社区首页 >问答首页 >材料Ui:在数组中更改mu图标道具

问材料Ui:在数组中更改mu图标道具
EN

Stack Overflow用户

提问于 2022-05-11 11:21:56

回答 1查看 32关注 0票数 0

对于数组中的许多图标，我需要更改道具(颜色、大小)(我使用mu v4)：

const ICONS_ARRAY: React.ReactNode[] = [
<AlertCircleCheckOutline />,
<AppleSafari />,
<MotionPlay />,
<AppleKeyboardCommand />,
<FileDocumentMultipleOutline />,
<ClipboardArrowLeftOutline />,
<ViewDashboardOutline />,
<CalendarClockOutline />,
<RobotHappyOutline />,
<AccountWrenchOutline />,
<AccountGroupOutline />,
<AccountCogOutline />,
<RunFast />,
<SpeedometerSlow />]

我尝试这样做(数组中的i索引图标)：

           <MenuItem>
                <Box>
                    <SvgIcon fontSize={'small'}>ICONS_ARRAY[i]</SvgIcon>
                </Box>
            </MenuItem>,

但是图标没有渲染。如果我在元素上更改了ICONS_ARRAYi，它就会工作，如下所示：

           <MenuItem>
                <Box>
                    <SvgIcon fontSize={'small'}><RunFast /></SvgIcon>
                </Box>
            </MenuItem>

我也尝试过React.cloneElement，但它的工作原理是一样的。

你知道问题可能是什么吗?解决办法是什么？

javascript

reactjs

material-ui

icons

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-05-11 12:00:38

我要说些小的话，但只是为了打发时间。

您试过添加括号"{}“吗？

就像这样..。

        <MenuItem>
            <Box>
                <SvgIcon fontSize={'small'}>{ICONS_ARRAY[i]}</SvgIcon>
            </Box>
        </MenuItem>

或者试试这个

    {ICONS_ARRAY.map((icon) => (
      <MenuItem>
        <SvgIcon fontSize={"small"}>{icon}</SvgIcon>
      </MenuItem>
    ))}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72200157

复制

相似问题

问材料Ui:在数组中更改mu图标道具
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问材料Ui:在数组中更改mu图标道具EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问材料Ui:在数组中更改mu图标道具
EN