Блог

Как изменить кнопку быстрого набора пользовательского интерфейса материала, по-видимому, она использует Fab по умолчанию, и все, что вы можете сделать, это изменить значок, но мне также нужно добавить текст, например:

 <Fab variant="extended">
    <NavigationIcon />
    Actions
</Fab>
 

1. Используйте SpeedDialAction для этой цели

     <SpeedDialAction
       key={action.name}
       icon={action.icon} // here goes your icon
       tooltipTitle={action.name} // here goes your text
       tooltipOpen
       onClick={handleClose}
    />
 

При наведении вы увидите

• Документация для этого
• Живой пример

2. Или используйте плавающую кнопку действия для своих целей

     <Fab
        aria-label={fab.label}
        className={fab.className}
        color={fab.color}
    >
        {fab.icon}
    </Fab>
 

• Документация для этого
• Живой пример

Пожалуйста, дайте мне знать, работает это для вас или нет )