Is there any way to change the background color of material-ui tab indicator on hover and the active state of Tab.
Default state
On hover I would like to style tab indicator like this
I couldn't find any way using css to modify like this. Any help on this would be greatly appreciated. Thank you.
You need to specify the style rules for the tab indicator and hover/selected-state tab, here's the demo:
const useStyles = makeStyles((theme) => ({
indicator: {
backgroundColor: "yellow",
},
tabRoot: {
"&:hover": {
color: "yellow",
opacity: 1
}
},
selectedTab: {
color: "yellow"
}
}));
<Tabs classes={{ indicator: classes.indicator }}>
<Tab
classes={{ root: classes.tabRoot, selected: classes.selectedTab }}
label="Item One"
/>
<Tab
classes={{ root: classes.tabRoot, selected: classes.selectedTab }}
label="Item Two"
/>
<Tab
classes={{ root: classes.tabRoot, selected: classes.selectedTab }}
label="Item Three"
/>
</Tabs>
Related
This is my code, the icon to open the textfield comes by default with a dark color and the background that I have is also dark, so it is hardly visible. I would like to put a white color on it. I have done it in a Textfield and it has worked for me, but being a child of Autocomplete it does not work.
const useStyles = makeStyles({
inputRoot: {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "white",
borderWidth: "2px",
},
color: "white",
fontFamily: "Bebas-Bold",
fontSize: "18px",
}
})
<Autocomplete
name="countryOfBirth"
onChange={(e) => handleDateCountryUser(e)}
disableListWrap='true'
options={country}
getOptionLabel={(option) => option.name}
renderInput={(params) => (
<TextField {...params}
label="country Of Birth *"
variant="outlined"
InputLabelProps={{
classes: {
root: classes.inputs,
},
}}
/>
)}
classes={{
inputRoot: classes.inputRoot,
root: classes.inputs,
option: classes.selectFont
}}
/>
</Grid>
New to Material UI I'm building a navigation component while reading through the docs and I ran across Buttons with icons and label. Wanting to build a button I created my component but there is a large gap between the text and icon.
Button:
<Button
onClick={selected}
{...{
size: 'small',
'aria-label': 'menu',
'aria-haspopup': 'true',
}}
className={navBtn}
endIcon={<MenuIcon />}
>
Menu
</Button>
When I review button in the browser the rendered element is:
<span class="MuiButton-endIcon">
<svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
</svg>
</span>
followed with the CSS of:
.MuiButton-endIcon {
display: inherit;
margin-left: 8px;
margin-right: -4px;
}
Wanting to modify the CSS of the margin left I attempted to target MuiButton-endIcon:
navBtn: {
color: '#363537',
verticalAlign: 'middle',
'&:hover': {
backgroundColor: '#FFFFFF',
boxShadow: 'none',
},
'&:focus': {
boxShadow: 'none',
},
MuiButtonEndIcon: {
marginLeft: '2px',
},
},
which did not work. The only hack I can get to work is to add a span with inline styling:
<Button
onClick={selected}
{...{
size: 'small',
'aria-label': 'menu',
'aria-haspopup': 'true',
}}
className={navBtn}
endIcon={<MenuIcon />}
>
<span style={{ marginRight: '-6px' }}>Menu</span>
</Button>
the full component:
import React from 'react'
// Material UI
import { Button } from '#material-ui/core'
import MenuIcon from '#material-ui/icons/Menu'
// Styles
import useStyles from '../styles'
const NavIcon = ({ selected }) => {
const { navBtn } = useStyles()
return (
<Button
onClick={selected}
{...{
size: 'small',
'aria-label': 'menu',
'aria-haspopup': 'true',
}}
className={navBtn}
endIcon={<MenuIcon />}
>
<span style={{ marginRight: '-6px' }}>Menu</span>
</Button>
)
}
export default NavIcon
Research:
Align material icon vertically
How to Align tab-label and tab-icon horizontally in material-UI using Tabs API
Centered icon and text (React Material-UI)
Material UI - Align icon to center with the Typography text
In Material UI is there a way to modify the margin from the <MenuIcon /> to the text with a <Button /> without implementing an inline style hack on the text?
Edit
Per the answer that mentioned spacing I tried the following:
on <Button>:
<Button
m={1}
onClick={selected}
{...{
size: 'small',
'aria-label': 'menu',
'aria-haspopup': 'true',
}}
className={navBtn}
endIcon={<MenuIcon />}
>
Menu
</Button>
on <MenuIcon>:
<Button
onClick={selected}
{...{
size: 'small',
'aria-label': 'menu',
'aria-haspopup': 'true',
}}
className={navBtn}
endIcon={<MenuIcon m={1} />}
>
Menu
</Button>
styling:
navBtn: {
color: '#363537',
'&:hover': {
backgroundColor: '#FFFFFF',
boxShadow: 'none',
},
'&:focus': {
boxShadow: 'none',
},
},
and there is no effect on the margin to the component. My understanding from the docs for spacing to work I would need to build a theme.
for every component of the material-ui, they take a classes prop, by which you can target the inside classes directly. For endIcon, button receives a style object to endIcon key in classes prop.
App.js
import React from 'react'
// Material UI
import { Button } from '#material-ui/core'
import MenuIcon from '#material-ui/icons/Menu'
// Styles from style.js
import styles from './styles'
const NavIcon = ({ selected }) => {
const classes = styles()
return (
<Button
{...{
size: 'small',
'aria-label': 'menu',
'aria-haspopup': 'true',
}}
classes={{endIcon:classes.endIcon}}
endIcon={<MenuIcon />}
className={classes.navBtn}
>
<span style={{ marginRight: '-6px' }}>Menu</span>
</Button>
)
}
export default NavIcon
styles.js
import { makeStyles, createStyles } from '#material-ui/core/styles';
const useStyles = makeStyles(() =>
createStyles({
endIcon:{
marginLeft:'4px'
},
navBtn: {
color: '#363537',
'&:hover': {
backgroundColor: '#FFFFFF',
boxShadow: 'none',
},
'&:focus': {
boxShadow: 'none',
},
},
}),
);
export default useStyles
Add the required margin in endIcon class.
Documentation
From the Spacing docs
In order for it to work you have to wrap the element you want in a so called "Box"
import Box from '#material-ui/core/Box';
You can specify a prop called "m" to the Button, for example:
<Box m="5px"> <Button /> </Box>
This adds 5 pixels to the overall margin of the button, but if you want to apply only margin to the left you can do:
<Box ml="5px"> <Button /> </Box>
I was unable to over ride the styling for Material UI's Tabs in React. I used the component wanted to override it's indicator color, text color but failed.
I already tried adding a new className to override the values but failed. event I switch the indicator color and text color to none, it only switch back to the default setting.
<Tabs value={TabValue} className={classes.tabs}
indicatorColor="primary"
textColor="primary"
onChange={this.handleChange}
>
I expect the .tabs will change the value of my indicator and text color but nothing happens
Hope someone can enlighten me on this!
According to Tabs docs:
indicatorColor can be one of: 'primary', 'secondary'. default is 'secondary'
textColor can be one of: 'primary', 'secondary', 'inherit'. default is 'inherit
In the following example, I change (not override) the default textColor and indicatorColor:
<AppBar position="static">
<Tabs value={value} onChange={handleChange}
indicatorColor="primary" //default is secondary
textColor="secondary" //default is inherit
>
<Tab label="Item One" />
<Tab label="Item Two" />
<Tab label="Item Three" />
</Tabs>
</AppBar>
If you want to override the primary and secondary colors, use MuiTheme:
import { createMuiTheme } from '#material-ui/core/styles';
import { ThemeProvider } from '#material-ui/styles';
import {green, blue} from '#material-ui/core/colors';
const theme = createMuiTheme({
palette: { // i override the default palette
primary: green,
secondary: blue
}
});
And than wrap your component with ThemeProvider:
<ThemeProvider theme={theme}>
<AppBar position="static">
<Tabs value={value} onChange={handleChange} indicatorColor="secondary">
<Tab label="Item One" />
<Tab label="Item Two" />
<Tab label="Item Three" />
</Tabs>
</AppBar>
</ThemeProvider>
You can refer to this CodeSandbox working example: https://codesandbox.io/s/material-demo-49mym?fontsize=14
How do you set the in-line font size on a Material-UI FormControlLabel? The below attempt does not work.
const styles: any = createStyles({
formControlLabel: { fontSize: '0.6rem',
'& label': { fontSize: '0.6rem' } }
});
<FormControlLabel style={styles.formControlLabel}
control={<Checkbox value="Hello" color="primary" />}
label="World"
/>
You could define the label as a Typography component and apply the style there:
<FormControlLabel
control={<Checkbox value="Hello" color="primary" />}
label={<Typography style={styles.formControlLabel}>World</Typography>}
/>
UPDATE:
As per Saber's comment, newer versions should instead use:
<FormControlLabel
control={<Checkbox value="Hello" color="primary" />}
label={<Typography className={styles.formControlLabel}>World</Typography>}
/>
Use material box fontSize instead of giving external style.
<FormControlLabel
control={<Checkbox name="checkbox" />}
label={
<Box component="div" fontSize={15}>
Small
</Box>
}
/>
FormControlLabel exposes typography as prop. tested and works in Mui V5. https://mui.com/api/form-control-label/#props
<FormControlLabel
componentsProps={{ typography: { variant: 'h3' } }}
/>
Use overrides section in theme.ts
export default createMuiTheme({
overrides: {
MuiFormControlLabel: {
label: {
fontSize: 14,
},
},
});
In MUI v5 you could do it like this:
<FormControlLabel
label={
<Typography sx={{ fontSize: 16 }}>
Label Text
</Typography>
}
control={<Switch />}
/>
Here's another option to achieve the same thing, but without the extra p that using <Typography /> will give you (referencing MUI v4 as the post is from before v5, although I'm sure this solution will work there too).
By referring to the docs for the FormControlLabel you can see the styles for the label can be modified with the label rule (kinda like you've tried to do already), however another approach would be to style the label by using withStyles
const StyledFormControlLabel = withStyles(() => ({
label: {
fontSize: '0.6rem',
}
}))(FormControlLabel);
...
<StyledFormControlLabel
control={<Checkbox value="Hello" color="primary" />}
label="World"
/>
Hi I want to style three buttons with different colors but When those buttons are disabled the custom style I've added at the beginning overrides the default style disabledTextColor, which adds a default fade and transparency value, so users can see that the button is disabled. How can style the disabled state or which should be the correct way to style the labelStyle and/or disabledTextColor? Here is an example
const style = {
labelStyle: {
color: 'red;
}
}
<FlatButton
label='Mit Linkedin anmelden'
labelPosition='after'
icon={<LinkedinIcon />}
onClick={() => Meteor.loginWithLinkedin()}
disabled={true}
labelStyle={style.labelStyle}
/>
</div>
<div className='mdl-cell mdl-cell--12-col'>
<FlatButton
label='Mit Google anmelden'
labelPosition='after'
icon={<GoogleIcon />}
onClick={() => Meteor.loginWithGoogle()}
disabled={true}
labelStyle={style.labelStyle}
/>
</div>
in this case the button always stays red even though the disabled state in True
You can create a little wrapper component around FlatButton that conditionally fades the labelStyle when the button is disabled.
const CustomFlatButton = (props) => (
<FlatButton
{...props}
labelStyle={{ ...props.labelStyle, opacity: props.disabled ? 0.3 : 1 }}
/>
);
...
<CustomFlatButton label="Disabled Red" style={{ color: 'red' }} disabled />
https://jsfiddle.net/6rads3tt/2/