I am currently attempting to customize the Material UI CSS in order to align both the phone icon and text on the same line and closer together. After doing some research, I stumbled upon the Tabs API which seemed promising.
Upon further inspection, I discovered that the wrapper property was causing some issues. Despite trying to resolve it by setting the display to block, the alignment of the phone icon and text remains stubbornly off-kilter.
To aid in troubleshooting, I have included my code snippet and a sandbox link below. You can access all of my code within tab-demo.js.
https://codesandbox.io/s/7p4ryw691
const styles = theme => ({
root: {
// flexGrow: 1,
width: "100%",
// flex: 0,
textTransform: "capitalize"
// backgroundColor: theme.palette.background.paper
// backgroundColor: 'red'
},
sportsAdvancedSearch: {
// backgroundColor: 'green'
color: "red",
fontSize: 16,
fontWeight: "bold"
},
sportsTotalNumber: {
fontWeight: "bold"
},
sportsExportContainer: {
paddingTop: 8,
paddingBottom: 8
},
indicator: {
backgroundColor: "red"
},
tabsIndicator: {
backgroundColor: "red",
textTransform: "capitalize"
},
tabRoot: {
textTransform: "initial",
width: "100%",
display: "block",
"&:hover": {
color: "red",
opacity: 1,
textTransform: "initial"
},
"&$tabSelected": {
color: "red",
fontWeight: theme.typography.fontWeightMedium,
textTransform: "capitalize"
},
"&:focus": {
color: "red",
textTransform: "capitalize"
}
},
tabSelected: {},
sportsHeading: {
fontSize: 32,
fontWeight: "bold",
padding: 16
},
sportsTabHeader: {
// border: "1px solid red",
backgroundColor: "#f5f5f5"
},
alignment: {
display: "block"
// color: 'red'
}
});
<Tabs
value={value}
onChange={this.handleChange}
scrollable
scrollButtons="on"
classes={{ indicator: classes.tabsIndicator }}
>
<Tab
label="phone"
icon={<PhoneIcon style={{ display: "block" }} />}
classes={{
root: classes.tabRoot,
selected: classes.tabSelected,
wrapper: classes.alignment
}}
/>
<Tab
favorites={favorites}
label="Favorites"
icon={<FavoriteIcon style={{ display: "block" }} />}
classes={{
root: classes.tabRoot,
selected: classes.tabSelected,
wrapper: classes.alignment
}}
/>
</Tabs>