【问题标题】:How to change icon into text in material-ui-table component如何在material-ui-table组件中将图标更改为文本
【发布时间】:2020-01-25 07:47:33
【问题描述】:

在材料表行可以通过点击右上角的+图标添加。我想用“添加行”之类的文本替换该图标。但是 material-table 接受图标对象并且没有其他道具可以做到这一点。有什么办法可以做到吗? 我正在使用材料表可编辑功能https://material-table.com/#/docs/features/editable

我尝试了一些类似的东西

1) 从检查元素中提取样式类并对其进行更改,但它会影响所有其他图标。没有专门用于添加图标的类。

2) 我尝试将 material-table 类扩展到我的组件并更改后端代码,但这也没有奏效。

Material table Image

【问题讨论】:

    标签: reactjs material-ui google-material-icons material-table


    【解决方案1】:

    Material 表只是渲染每个键的 icon 属性中返回的任何内容。

    您可以像这样简单地使用图标道具:

    icons={{Add: () => 'Add Row'}}
    

    这将在图标位置呈现'Add Row'

    【讨论】:

    • @Domino987,知道如何让添加图标出现在表格的左上角而不是右上角吗?
    • @twgardner2 喜欢在标题旁边?您需要覆盖标头组件并自己实现。
    • @Domino987,是的,我有一张很宽的桌子,我不想滚动到“+”图标,所以我想把它移到标题附近。覆盖标题是有道理的,谢谢。
    • 你可以使用options={{ toolbarButtonAlignment: 'left', searchFieldAlignment: 'left' }}
    猜你喜欢
    • 2021-12-18
    • 1970-01-01
    • 2020-12-22
    • 2021-08-03
    • 2019-07-28
    • 2020-10-26
    • 2020-11-30
    • 2019-11-29
    • 2020-04-03
    相关资源
    最近更新 更多