使用文本而不是图标时自定义 Material UI Table 图标属性的字体

Posted 2023-02-22

【中文标题】使用文本而不是图标时自定义 Material UI Table 图标属性的字体

【英文标题】：Customize font of icon property of Material UI Table when using text instead of icon

【发布时间】：2021-06-21 18:44:38

【问题描述】：

我在我的 react 应用程序中使用 Material UI 表，我希望在操作按钮上使用自定义事件（而不是添加、更新或删除）。而不是创建自己的图标，我只想有一些文字，所以我做了......

<MaterialTable
                data=someData
                actions= [
                      
                      icon: () => "My Custom Action",
                      iconProps:  style:  fontSize: "10px", color: "blue"  ,
                      tooltip: "Search Transactions",
                      onClick: (event, rowData) => (
                          alert("You did a custom on action " + rowData)
                      )
                  

现在图标中的文字又大又丑，如所附屏幕截图所示[![在此处输入图像描述][1]][1]

有什么方法可以应用一些样式以使其更小并适合表格？

我尝试了 iconProps 但它没有做任何事情。 [1]：https://i.stack.imgur.com/ysht7.png

【参考方案1】：

您可以添加选项，然后在其中创建样​​式。

options=
        rowStyle:  fontSize: "10px", color: "blue" 
      

https://material-table.com/#/docs/features/styling

【讨论】：

感谢@Travis，但这将适用于整行。我只希望设置“动作”图标文本的样式。