How to Customize MUI Speed Dial: Size, Color, Hover

The Speed Dial component is a useful way to preserve screen space and efficiently show action options. The Speed Dial size, color, hover, and other styles can be customized by targeting the proper nested selectors with the sx prop.

In this post I will fork the Basic Speed Dial example from the MUI docs, and add styling to it. I also changed the background color and size of the speed dial “actions”. Here’s what we will create:

Full code is in the Resources section.

Speed Dial Size

The Speed Dial usually is shown as a circle, so you’ll want the height and width to be equal. The circle is known as a Floating Action Button, so we will see some default classes like MuiFab-root and MuiFab-primary. These can be useful as nested selectors.

If you want the primary FAB (button) and all the action FABs to have the same size and styling, create a nested selector that targets MuiFab-root. If you want different styling for the primary Speed Dial FAB, target MuiFab-primary. In my tutorial I target the primary class.

Here’s the code for setting the height and width of the Speed Dial. Notice the space between the & and the FAB class. This means MUIFab-primary is on a child element of the root:

<SpeedDial
  sx={{ '& .MuiFab-primary': { width: 80, height: 80 } }}
/>

If you want to increase the icon size, target the MuiSpeedDialIcon-icon class with a nested selector inside the MuiFab-primary selector:

<SpeedDial
  sx={{ '& .MuiFab-primary': { '& .MuiSpeedDialIcon-icon': { fontSize: 30 } } }}
/>

Speed Dial Color

Speed Dial color can be cutomized by targeting either the MuiFab-root child or the MuiFab-primary child. Just like with size, target the primary class if you only want to styling applied to the ‘primary’ Button that is always visible.

<SpeedDial
  sx={{ '& .MuiFab-primary': { backgroundColor: 'gold', color: 'blue' } }}
/>

The color value will style the icon in the primary Speed Dial Button, while backgroundColor will fill the circle.

We can’t target background color at the root level because this will fill in a containing div that controls placement of the Speed Dial primary button.

Speed Dial Hover

We can change the hover styling by adding a hover selector. There are a couple different syntax options, but I like the below because it makes it easy to add non-hover styling and hover styling at the same time.

Notice there is no space between the & and the MuiFab-primary class. This means they are both selecting on the same element.

<SpeedDial
  sx={{ '& .MuiFab-primary': { '&:hover': {backgroundColor: 'yellow'} } }}
/>

Speed Dial Action Size, Color and More Styles

The SpeedDialAction components are children of the SpeedDial in the JSX code. The individual actions can have CSS values passed to their sx prop.

Here’s an example with width, height, and background color:

<SpeedDialAction
  key={action.name}
  icon={action.icon}
  tooltipTitle={action.name}
  sx={{width: 50, height: 50, backgroundColor: 'lightblue'}}
/>

All the usual CSS values can be passed. If you want the icon or text to be larger, increase font size. If you want the icon or text to have color, pass a color value.

We can render text instead of an icon in SpeedDialAction by passing text to the icon prop.

Resources

Check out these related MUI posts:

• The Ultimate Guide to the Material-UI Snackbar
• How to Style the MUI Badge: Background Color, Centering, and Size
• The Essential Guide to Material-UI Icon Color

Here is the full code for this tutorial:

import Box from '@mui/material/Box';
import SpeedDial from '@mui/material/SpeedDial';
import SpeedDialIcon from '@mui/material/SpeedDialIcon';
import SpeedDialAction from '@mui/material/SpeedDialAction';
import CheckIcon from '@mui/icons-material/Check';
import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
import ThumbUpIcon from '@mui/icons-material/ThumbUp';

const actions = [
  { icon: 'TEST', name: 'Text' },
  { icon: <CheckIcon />, name: 'Check' },
  { icon: <ErrorOutlineIcon />, name: 'Error' },
  { icon: <ThumbUpIcon />, name: 'Share' },
];

const actionSize = {
  width: 50,
  height: 50,
  backgroundColor: 'lightblue'
}

export default function CustomSpeedDial() {
  return (
    <Box sx={{ height: 320, transform: 'translateZ(0px)', width: '100%' }}>
      <SpeedDial
        ariaLabel="Custom SpeedDial example"
        sx={{ position: 'absolute', bottom: 16, right: 16, '& .MuiFab-primary': { backgroundColor: 'gold', color: 'blue', width: 80, height: 80, '& .MuiSpeedDialIcon-icon': { fontSize: 30 }, '&:hover': {backgroundColor: 'yellow'} } }}
        icon={<SpeedDialIcon />}
      >
        {actions.map((action) => (
          <SpeedDialAction
            key={action.name}
            icon={action.icon}
            tooltipTitle={action.name}
            sx={actionSize}
          />
        ))}
      </SpeedDial>
    </Box>
  );
}

MUI Speed Dial Docs