question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add font-color control on Fab Group Labels

See original GitHub issue

Is 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:closed
  • Created 3 years ago
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
justinjaegercommented, Nov 2, 2021

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

2reactions
butterfly-valleycommented, Oct 14, 2021

Confirm the issues still persists

Read more comments on GitHub >

github_iconTop Results From Across the Web

FAB.Group · React Native Paper
FAB.Group. A component to display a stack of FABs with related actions in a speed dial. ... labelTextColor : custom label text color...
Read more >
React MUI - Cannot Change FAB color on Hover
To override the color, you need to use makeStyles , Here is the Codesandbox for that.
Read more >
Buttons: floating action button - Material Design
A floating action button (FAB) represents the primary action for a screen. ... better suited to a toolbar (like controls to adjust volume...
Read more >
Copy and paste existing labels - Intergraph Smart 3D - Help ...
Press F8 to display the properties of the first label you selected. ... Add a detail sketch · Control the output of fonts...
Read more >
Customizing your templates for email notifications
To add an image such as a company logo to the template, insert an IMG tag that references the image. Example:.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found