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. ...