There's more...

Let's create a small abstraction for Fab components that applies the fab style and uses the correct variant. Since the extended variant is only useful when there's text in the button, you shouldn't have to remember to set it every time you want to use it. This can be especially confusing if your application has both icon and icon plus text floating action buttons.

Here's the code to implement the new Fab component:

const ExtendedFab = withStyles(styles)(({ classes, ...props }) => {  const isExtended = React.Children.toArray(props.children).find(    child => typeof child === 'string'  );  return (    <Fab      className={classes.fab}      variant={isExtended && 'extended'}      {...props}    />  );});

The className property is set in the same way as before. ...

Get React Material-UI Cookbook now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.