MUI: BottomNavigationAction override label styles - reactjs

Question

I'm implementing a BottomNavigation bar for mobile. I want the label texts to be UPPERCASE and add 5px to spacing to icon above.
<BottomNavigation
value={selectedTab}
onChange={this.handleTabChange}
className={classes.bottomNav}>
<BottomNavigationAction
label="Details"
value={0}
icon={<DescriptionIcon />}
className={classes.bottomNavLabel}
/>
<BottomNavigationAction
label="Card"
value={1}
icon={<CreditCardIcon />}
disabled={!navEnabled}
className={classes.bottomNavLabel}
/>
</BottomNavigation>
My styles look like this:
export default ({ spacing, breakpoints }: Theme) =>
createStyles({
bottomNav: {
position: 'fixed',
bottom: 0,
width: '100%',
},
bottomNavLabel: {
textTransform: 'uppercase',
marginTop: 5,
},
})
I tried styling in bottomNavLabel class but it's hitting the whole button element. I only want to hit the <span> element with the label inside.
According to docs i can override classes.label but I can't get it to work. I suspect this means I create a wrapper component around BottomNavigationAction but I would prefer not to do this, as I'm not using this elsewhere and it feels kind of "bloated" to do.
How do I do that?

Answer 1

I figured it out. <BottomNavigationAction> takes a prop classes where I define the label styling. Like this:
<BottomNavigation
value={selectedTab}
onChange={this.handleTabChange}
className={classes.bottomNav}>
<BottomNavigationAction
label={<span className="bottomNavLabel">Details</span>}
value={0}
icon={<DescriptionIcon />}
classes={{label: classes.label}}
/>
<BottomNavigationAction
label={<span className="bottomNavLabel">Card</span>}
value={1}
icon={<CreditCardIcon />}
disabled={!navEnabled}
classes={{label: classes.label}}
/>
</BottomNavigation>
And styling:
export default ({ spacing, breakpoints }: Theme) =>
createStyles({
bottomNav: {
position: 'fixed',
bottom: 0,
width: '100%',
},
label: {
textTransform: 'uppercase',
marginTop: 5,
},
})