如何在PrimeNG Speeddial选项按钮中添加文本？

以下是针对Material-UI SpeedDial组件的实现方案，可让选项显示文本而非图标：

• 核心思路：使用SpeedDialAction组件的icon属性传入文本元素，而非图标组件；同时调整样式让文本正常显示。

• 代码示例：

import SpeedDial from '@mui/material/SpeedDial';
import SpeedDialAction from '@mui/material/SpeedDialAction';

const actions = [
  { name: '新建' },
  { name: '编辑' },
  { name: '删除' },
];

export default function TextOnlySpeedDial() {
  return (
    <SpeedDial
      ariaLabel="SpeedDial text example"
      icon={<span>菜单</span>}
      direction="up"
    >
      {actions.map((action) => (
        <SpeedDialAction
          key={action.name}
          icon={<span style={{ padding: '0 8px' }}>{action.name}</span>}
          tooltipTitle={action.name}
        />
      ))}
    </SpeedDial>
  );
}

• 样式优化说明：
  • 给文本元素添加内边距，避免文本紧贴组件边缘
  • 若需统一样式，可通过自定义CSS类或Material-UI的styled组件批量设置，示例：

import { styled } from '@mui/material/styles';

const StyledSpeedDialAction = styled(SpeedDialAction)(({ theme }) => ({
  '& .MuiSpeedDialAction-icon': {
    padding: '0 12px',
    fontSize: '14px',
  },
}));

// 使用时替换原SpeedDialAction：
<StyledSpeedDialAction
  key={action.name}
  icon={<span>{action.name}</span>}
  tooltipTitle={action.name}
/>

内容的提问来源于stack exchange，提问作者Edgar Conrado