Menu
I have MUI v1 beta 32 running on a production site, very nicely. Time to update to v1! So far, changes have been very simple. It's mostly been a matter of updating the import tags.
But I am running into an issue with my selected <Tab/> indicator.
I was using the rootInheritSelected style override in order to apply the color of my choice.
How to implement it in v1?
860
1, you can do this: import Tabs from '@material-ui/core/Tabs'; import { withStyles } from '@material-ui/core/styles'; const StyledTabs = withStyles({ indicator: { backgroundColor: 'orange' } })(Tabs);
You can use the state to set the initial tab select. Show activity on this post. The value of the currently selected Tab . If you don't want any selected Tab , you can set this property to false .
In this article, we’ll look at how to customize tabs with Material UI. We can make tabs centered with the centered prop. Then the tabs will be centered. We can make tabs scrollable with the scrollButtons set to auto and variant set to scrollable . This way, the scroll buttons will be shown on mobile and hidden in the desktop.
Material-UI AppBar is a useful component for positioning titles, hamburger menus, admin buttons, and more. Styling the AppBar background color, text color, positioning, font, and any other CSS property is a common need and can be tricky to figure out.
If you want to change the indicator color instead, simply apply a background color in this selector. There are likely quite a few customizations you could do here to the tab indicator size, padding, margin, or anything else interesting. I used two different approaches to customizing the tabs simply to show what is possible.
The Material Design color system can be used to create a color theme that reflects your brand or style. The Material Design team has also built an awesome palette configuration tool: material.io/resources/color/ . This can help you create a color palette for your UI, as well as measure the accessibility level of any color combination.
In the end I found it was much simpler:
<Tabs
textColor="inherit"
fullWidth
centered
classes={{
indicator: classes.indicator
}}>
<Tab />
<Tab />
</Tabs>
and the styles:
const styles = theme => ({
indicator: {
backgroundColor: 'white',
},
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With