Add font-color control on Fab Group Labels
See original GitHub issueIs your feature request related to a problem? Please describe.
Fab Group label colours can’t be manually changed outside of the theme, and users of a light theme have the label text opacity set to 0.54.
Describe the solution you’d like I’d like to be able to have greater control over fab group label font-color by passing a color in to the styles property and having it affect the label color.
Describe alternatives you’ve considered I’m currently passing in a modified theme in order to achieve a similar result, setting it to a dark theme to avoid the opacity change and setting the font-color to the one I desire.
<Fab.Group
theme={{
...myTheme,
dark: true,
colors: {
...myTheme.colors,
text: '#000'
}
}}
Additional context There’s a stale pull request removing the opacity change, but I figure that the forced opacity must be there for a reason. I’m happy to make a pull request to allow the user to pass in the font-color themselves. Otherwise it takes the existing theme’s text color and keeps the opacity adjustment.
Issue Analytics
- State:
- Created 3 years ago
- Comments:8 (3 by maintainers)

Top Related StackOverflow Question
This is a bit hacky but you can change the label text color by passing this into FAB.Group:
theme={{ colors: { text: 'black' }, dark: true }}This is because it determines labelColor specifically from the passed in theme.
Dark needs to be true, else it will be 50% opacity.
I really do wish there were options to customize the label though, because I’d like to have the option to make it bigger and add padding. The icon/action styling is useless because props like marginBottom stretches the label along with it
Confirm the issues still persists