I am trying to customize CSS of a select component of material-ui this is inherited from class="MuiInputBase-root-97 MuiInput-root-84 MuiInput-underline-88 MuiInputBase-formControl-98 MuiInput-formControl-85" now i am stuck not able to change default design. Please help me, I don't have much experience with material-ui
I have tried to pass an object in classes props of select to change style applied by MuiInputBase-root-97, MuiInput-root-84, MuiInput-underline-88, MuiInputBase-formControl-98, MuiInput-formControl-85, and their pseudo class
const styles = theme => ({
root: {
'&$hover': {
color: 'red',
},
},
inputUnderline: {
minWidth: 220,
},
selectEmpty: {
marginTop: theme.spacing.unit * 2,
},
formControl: {
margin: theme.spacing.unit,
minWidth: 120,
},
});
<FormControl className={classes.formControl}>
<Select
value={this.state.age}
onChange={this.handelchange}
name="age"
displayEmpty
className={classes.selectEmpty}
classes={{
underline: classes.inputUnderline //change css of MuiInput-underline-88 and their pseudo class
root: classes.inputBaseRoot //want to change css of MuiInputBase-root-97 and their pseudo class
}}
>
<MenuItem value="" disabled>
Placeholder
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
<FormHelperText>Placeholder</FormHelperText>
</FormControl>
I want to remove border at the bottom on hover, focus, after, and before
I want a custom design in it overrides all CSS class at a select componentstrong text
In material-ui, you can override the style and customize it according to your requirement.
Please refer https://material-ui.com/customization/overrides/
Related
I have a component that opens/closes a material-ui table. I use a switch to open/close that component. This largely works exactly as I want. I have a minor aesthetic issue with the placement of the Hide/Show text. The top of the text aligns with the horizontal center of the switch control.
Here is the switch code.
<FormControlLabel
className={classes.switch}
control={<Switch checked={show} onChange={handleChangeShow} />}
label={show ? "Hide" : "Show"}
/>
Notice that the Show/Hide label is not aligned with the switch itself. It's too low. How can I fix this?
Here is the makeStyles function.
const useStyles = makeStyles((theme) => ({
root: {
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(1),
flexDirection: "column",
display: 'flex'
},
container: {
width: (props) => (props.show ? "inherit" : "0px"),
height: (props) => (props.show ? "inherit" : "0px")
},
switch: {
justifyContent: "flex-end",
alignItems: "flex-end"
},
}
Here is the wrapper code:
return (
<div className={classes.root}>
<Typography>{title}</Typography>
<div className={classes.container}>
<Fade in={show}>
<Paper className={classes.paper}>{frames_view}</Paper>
</Fade>
</div>
<FormControlLabel
className={classes.switch}
control={<Switch checked={show} onChange={handleChangeShow} />}
label={show ? "Hide" : "Show"}
/>
</div>
Ok.. Looks like it was solved by wrapping in a FormGroup:
<FormGroup
className={classes.switch}
row
>
<FormControlLabel
control={<Switch checked={show} onChange={handleChangeShow} />}
label={show ? "Hide" : "Show"}
/>
</FormGroup>
I am currently using the following to generate a select dropdown on my page:
<Select>
{options.map((option) => (
<MenuItem
className={classes.selectOption}
key={option}
value={option}
>
<ListItemText primary={option} />
</MenuItem>
))}
</Select>
When I click on the dropdown on the page, an element with MuiPaper-root class appears on the page. This shows me the list of options in menu item format. I would like to style the MuiPaper-root element.
Is there a way to do this by passing in an attribute to the <Select> component?
Yes, you can change the paper by MenuProps
https://material-ui.com/api/select/#props
const useStyles = makeStyles((theme) => ({
paper: {
"& ul": {
backgroundColor: "red",
},
}
}));
export default function CustomizedSelects() {
const classes = useStyles();
return (
<Select MenuProps={{ classes: { paper: classes.paper} }}>
{options.map((option) => (
<MenuItem
className={classes.selectOption}
key={option}
value={option}
>
<ListItemText primary={option} />
</MenuItem>
))}
</Select>);
}
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/
I've been trying to figure out how to lessen the gap using css with no luck. I created the style object and used leftPosition key but the result was not the one I expected. I was expecting that the text is the only thing that will move. However, if you look at the screenshot specifically the first menu, the icon also moved. What I'd like to achieve is reduce the gap between the svn icon and the text.
import React from 'react';
import List from 'material-ui/lib/lists/list';
import ListItem from 'material-ui/lib/lists/list-item';
import ActionGrade from 'material-ui/lib/svg-icons/action/grade';
import ActionInfo from 'material-ui/lib/svg-icons/action/info';
import ContentInbox from 'material-ui/lib/svg-icons/content/inbox';
import ContentDrafts from 'material-ui/lib/svg-icons/content/drafts';
import ContentSend from 'material-ui/lib/svg-icons/content/send';
import Divider from 'material-ui/lib/divider';
import Assignment from 'material-ui/lib/svg-icons/action/assignment';
import Settings from 'material-ui/lib/svg-icons/action/settings';
import ManageDB from 'material-ui/lib/svg-icons/content/unarchive';
const style = {
menu: {
marginRight: 32,
marginBottom: 32,
float: 'left',
position: 'relative',
zIndex: 0,
width: 235,
},
rightIcon: {
textAlign: 'center',
lineHeight: '24px',
},
width: {
width: 235
},
leftPosition: {
left: 50
}
};
const LeftNavigation = () => (
<div>
<List>
<ListItem style={style.leftPosition} primaryText="Logs" leftIcon={<Assignment />} />
<ListItem primaryText="Manage DB" leftIcon={<ManageDB style={style.gap}/>} />
<ListItem primaryText="Top Issues" leftIcon={<ContentSend style={style.gap}/>} />
<ListItem primaryText="Settings" leftIcon={<Settings style={style.gap}/>} />
<ListItem primaryText="Logout" leftIcon={<ContentInbox style={style.gap}/>} />
</List>
<Divider />
<List>
<ListItem primaryText="All mail" rightIcon={<ActionInfo />} />
<ListItem primaryText="Trash" rightIcon={<ActionInfo />} />
<ListItem primaryText="Spam" rightIcon={<ActionInfo />} />
<ListItem primaryText="Follow up" rightIcon={<ActionInfo />} />
</List>
</div>
);
export default LeftNavigation;
The accepted solution didn't work for me. Here is what I ended up doing after exploring the DOM.
const useStyles = makeStyles((theme) => ({
icon: {
minWidth: '30px',
}
}));
and then apply this class for the ListItemIcon as:
<ListItemIcon className={classes.icon}> <HelpOutlineIcon/> </ListItemIcon>
Hope it helps someone save time.
You can add style in ListItemIcon.
<ListItemIcon style={{minWidth: '40px'}} >
This is what worked for me. I set this in my global css file.
.MuiListItemIcon-root {
min-width: 40px !important;
}
If you want to do it globally use overrides in createMuiTheme
const theme = createMuiTheme({
overrides: {
MuiListItemIcon: {
root: {
minWidth: 40,
},
},
},
})
Note:
If you're using MUI version 5 then locate createTheme instead of createMuiTheme
This is my 2¢:
<ListItemText primary={<div style={{ margin: -25, marginTop: -7, color: 'white', fontSize: 11 }}>Your text here</div>} />
Adjusting margin (n.b., it's a negative number) and the top margin you can align the icon (on the left) with your text
You can also use sx prop instead of style, if you want access to the theme object, e.g.:
<ListItemIcon sx={{minWidth: (theme) => theme.spacing(4)}}>
This is only applicable to Mui 1.x.x. For later versions, please see responses to this answer below.
The ListItem renders a div called innerDiv with 72px left/right padding to render the left/right icon and label with sufficient space. You should try this in the Style -
<ListItem innerDivStyle={{paddingLeft: 60}} primaryText="Logs" leftIcon={<Assignment />} />
Replace 60 with whatever pleases you.
Just information for #Adam Mańkowski 's answer.
In MUI v5.5, you can config your theme like this.
createTheme({
components: {
MuiListItemIcon: {
styleOverrides: {
root: {
minWidth: 0
}
}
}
}
});