I am trying to customize Material-UI StepConnector with classes, but it seems to not work.
I use material-ui 1.4.0
Here is how I try to do it.
<Stepper
connector={
<StepConnector
classes={{
completed: { borderColor: "red" },
line: { borderColor: "red" }
}}
/>
}
activeStep={activeStep}
orientation="vertical"
>
Here is demo https://codesandbox.io/s/oxrw7ryy7z
As you can see the StepConnector color does not change at all.
The StepConnector doesn't have a complete class in v1.4.0, documentation for v1.4.0: https://v1-4-0.material-ui.com/api/step-connector/
If you want to change the color of the wole line try this:
// In your style
contentRoot: {
borderColor: 'red',
},
connectorLine: {
borderColor: 'red',
},
...
<StepConnector
classes={{
line: classes.connectorLine
}}
/>
...
<StepContent
classes={{
root: classes.contentRoot,
}}
>
Demo: https://codesandbox.io/s/p9wj1498yx
Add a new class in your styles:
connector: {
borderLeft: "1px red solid"
}
And then use it in your component:
<StepConnector
classes={{
line: classes.connector
}}
/>
The completed class does not appear to be a class that can be overriden in this version.
Related
I need to change my dropdown hover to green. I tried inline CSS and makeStyle(), But non of these are not working for me. I have no idea to change this hover color. If anyone can help me with this, I really appreciate it.
I need to change this hover color into green.
This is my code:-
<Select
className={dropDowStyle.select}
style={{
borderRadius: '8px', marginLeft: '-150px',
width: '163px', height: '45px', fontSize: '15px',
backgroundColor: "transparent",borderColor:primaryColor + "88"
}}
sx={{width: 163}}
// defaultValue=""
input={<OutlinedInput style={{borderColor: primaryColor + "88",}}/>}
displayEmpty
value={city}
renderValue={(value) => {
return (
<Box sx={{display: "flex", gap: 2.5}}>
<SvgIcon style={{fontSize: '20px'}}>
<LocationOnIcon/>
</SvgIcon>
{renderLocation && value}
</Box>
);
}}
onChange={cityValueHandler}
>
{shopLocation.map((option) => (
<MenuItem key={option.gg} value={option.gg}>
{option.gg}
</MenuItem>
))}
</Select>
The container of the menu list is a Paper which is part of the Menu (the dropdown of the Select). You can target the props of the nested component like below. See here for the list of Menu classNames. Also have a look at all classNames for the component states.
<Select
// to override the border color of the Select input
sx={{
"&:hover": {
"&& fieldset": {
border: "3px solid green"
}
}
}}
// to override the color of the dropdown container
MenuProps={{
PaperProps: {
sx: {
"& .MuiMenuItem-root.Mui-selected": {
backgroundColor: "yellow"
},
"& .MuiMenuItem-root:hover": {
backgroundColor: "pink"
},
"& .MuiMenuItem-root.Mui-selected:hover": {
backgroundColor: "red"
}
}
}
}}
Live Demo
You can use inputProps of Select and set the sx prop like this:
<Select
inputProps={{
sx: {
"&.MuiOutlinedInput-input:hover": {
border: "2px solid green"
}
}
}}
>
Just inspect the element you want to apply hover CSS.
https://mui.com/customization/how-to-customize/#overriding-nested-component-styles
For example find MuiSlider-thumb in the elements and try to apply on, discard the hash value in front
.MuiSlider-thumb:hover {
color:green;
}
or background to green.
Be careful as this might override all of the selects in your code base, so it might not be the best solution.
Is there any way to remove top and bottom padding from Menu component?
Tried to set padding to 0 in PaperProps and also in makeStyles but when I inspect the element on browser it still shows 8px default padding on top and bottom.
Here's the code if it helps:
<Menu
className={classes.menuSearchContainer}
PaperProps={{
style: {
backgroundColor: "#fff",
width: "270px",
paddingTop: '0px',
},
}}
>
<Input
className={classes.menuSearchInput}
type="text"
/>
target the list class from Menu classes prop.
<Menu
{...other props}
classes={{list:classes.list}}
>
{...meuItem}
</Menu>
and useStlyes will be:
const useStyles = makeStyles(() =>
createStyles({
list:{
padding:'0'
}
}),
);
Checkout a Codesandbox demo
use MenuListProps:
<Menu
className={classes.menuSearchContainer}
PaperProps={{
style: {
backgroundColor: "#fff",
width: "270px",
},
}}
MenuListProps={{ sx: { py: 0 } }}
>
<Input
className={classes.menuSearchInput}
type="text"
/>
Try this
<MenuItem dense=true />
From Materiul-UI dense : If true, compact vertical padding designed for keyboard and mouse input will be used.
This might be the issue.
I am trying to programmatically change the color of a MUI Chip without much luck. According to the Chip API you have to set the color via the color prop with one of three values from an enum; default, primary, and secondary. You should then be able to override the the colorPrimary or colorSecondary css classes and the background color should change.
Here is an example of my code:
<Chip key={label.id} color='primary' classes={{ colorPrimary: label.color }} label={label.label} />
And a picture of the element in browser:
https://i.imgur.com/bWYGzzz.png cant inline yet :(
If you look at the selected element, you will see the correct color I am trying to apply, #ff0000, so it is getting the color and putting it somewhere.
I've tried this variation, adding the colorBackground property, but I get an error saying the colorPrimary class expects a string instead of an object
<Chip key={label.id} color='primary' classes={{ colorPrimary: { backgroundColor: label.color } }} label={label.label} />
Again to reiterate my goal: I want to apply a hex code color to the chip to change the background color.
you can make it in many ways.
you can add styles directly
<Chip key={label.id} color='primary' style={{backgroundColor:'green'}} label={label.label} />
or you can override the class:
const StyleChip = withStyles({
root: {
backgroundColor:'salmon'
}
})(Chip);
to use everywhere you only will replace Chip to StyleChip
<StyleChip key={label.id} color='primary' label={label.label} />
but if you wanna put the color by programation, the first way is perfect, because
style={{backgroundColor:_thisCanBeVariable_}}
You can set the primary or secondary color of the Chip component easily using createTheme:
const theme = createTheme({
components: {
MuiChip: {
styleOverrides: {
colorPrimary: {
backgroundColor: 'red',
},
colorSecondary: {
backgroundColor: 'brown',
},
},
},
},
});
<Chip label="primary" color="primary" />
<Chip label="secondary" color="secondary" />
Or if you're using MUI v5, you can quickly change its color with the help of sx prop:
<Chip label="sx" sx={{ bgcolor: 'green', color: 'white' }} />
If you want to be able to specify different color via a prop, you can use styled:
const options = {
shouldForwardProp: (prop) => prop !== 'bgcolor',
};
const StyledChip = styled(
Chip,
options,
)(({ bgcolor }) => ({
color: 'white',
backgroundColor: bgcolor,
}));
<StyledChip label="styled" bgcolor="purple" />
For those trying to get this previous to the v5 (which would need to add a new color to the palette) a simple wrapper will get the job done:
import React from 'react';
import PropTypes from 'prop-types';
import MaterialChip from '#material-ui/core/Chip';
import { withStyles } from '#material-ui/core/styles';
const Chip = (props) => {
const StyledChip = withStyles({
root: {
'color': 'white',
'backgroundColor': `${props.color} !important`,
'&:hover': {
backgroundColor: props.color,
filter: 'brightness(120%)',
},
'&:active': {
boxShadow: 'none',
backgroundColor: props.color,
borderColor: props.color,
},
},
outlined: {
color: props.color,
border: `1px solid ${props.color}`,
backgroundColor: `transparent !important`,
},
icon: {
color: props.variant === 'outlined' ? props.color : 'white',
},
deleteIcon: {
color: props.variant === 'outlined' ? props.color : 'white',
},
})(MaterialChip);
return <StyledChip {...props} />;
};
Chip.propTypes = {
color: PropTypes.string,
variant: PropTypes.oneOf(['regular, outlined']),
};
export default Chip;
Currently I am struggling with setting the background color of a MenuItem component which is selected to a different color. (without having to using !important to force it)
The component code:
<MenuItem
classes={{
root: this.props.classes.root,
selected: this.props.classes.selected
}}
value={10}>
Alfabetical
</MenuItem>
This is the css:
const homePageStyle = (theme) => ({
root: {
width: "300px"
},
selected: {
backgroundColor: "turquoise !important",
color: "white",
fontWeight: 600
}
});
What do I want to achieve?
I would like to set the backgroundColor of the MenuItem without having to set the !important flag. I've done that with plenty of components but this seems not work around at the moment.
I am using version "#material-ui/core": "^1.0.0-rc.0",
I just made a working example here
For your selected class to be taken into account, you have to set the selected property of your MenuItem component to true
<MenuItem
onClick={this.handleClose}
selected
classes={{ selected: classes.selected }}
>
I'm doing it this way to change the MenuItem background of selected. (selected prop provided by material UI).
export default createMuiTheme({
overrides: {
MuiMenuItem: { // For ListItem, change this to MuiListItem
root: {
"&$selected": { // this is to refer to the prop provided by M-UI
backgroundColor: "black", // updated backgroundColor
},
},
},
},
});
These are the defaults that can be overridden https://material-ui.com/customization/default-theme/#default-theme
Reference: https://material-ui.com/customization/components/#global-theme-override
Note: I'm using Material-UI version 4.9.11
In MUI v5, this is how you do it:
<Select
MenuProps={{
sx: {
"&& .Mui-selected": {
backgroundColor: "pink"
}
}
}}
>
Live Demo
You can updated your styles to this:
const homePageStyle = (theme) => ({
root: {
width: "300px"
},
selected: {
'&.Mui-selected': {
backgroundColor: "turquoise",
color: "white",
fontWeight: 600
}
}
});
This is because of how material-ui styles this component: .MuiListItem-root.Mui-selected
The specificity of those two classes is taking priority over the provided override.
To customize component style in Mui v5, you can try this:
MuiListItemButton: {
styleOverrides: {
root: {
'&.Mui-selected': {
backgroundColor: '#e44444',
}
}
},
},
You'll want to use MuiListItemButton component, because "selected" is deprecated in MuiListItem.
Customizing components: https://mui.com/material-ui/customization/theme-components/
In the screenshot above, I am trying to change the step color to either: green for correct, yellow for in-progress and red for incorrect.
How could I do this?
In case anyone is still looking for this question, for MUI 5 it is through the sx property or styled.
Checkout what are the classes of step, stepIcon so you can customize the styles.
<Box sx={{ width: '100%' }}>
<Stepper activeStep={currentStep} alternativeLabel>
{Object.keys(steps).map((stepNumber) => (
<Step
key={stepNumber}
sx={{
'& .MuiStepLabel-root .Mui-completed': {
color: 'secondary.dark', // circle color (COMPLETED)
},
'& .MuiStepLabel-label.Mui-completed.MuiStepLabel-alternativeLabel':
{
color: 'grey.500', // Just text label (COMPLETED)
},
'& .MuiStepLabel-root .Mui-active': {
color: 'secondary.main', // circle color (ACTIVE)
},
'& .MuiStepLabel-label.Mui-active.MuiStepLabel-alternativeLabel':
{
color: 'common.white', // Just text label (ACTIVE)
},
'& .MuiStepLabel-root .Mui-active .MuiStepIcon-text': {
fill: 'black', // circle's number (ACTIVE)
},
}}>
<StepLabel>{steps[stepNumber].label}</StepLabel>
</Step>
))}
</Stepper>
</Box>
Update: Here is correct way for latest version 3. You just need to add the overrides correctly to your theme by referencing MuiStepIcon:
const theme = createMuiTheme({
overrides: {
MuiStepIcon: {
root: {
'&$completed': {
color: 'pink',
},
'&$active': {
color: 'red',
},
},
active: {},
completed: {},
},
palette: {
...
}
})
Old question but in case anyone is looking.
You need to edit the theme and wrap it in getMuiTheme
import getMuiTheme from 'material-ui/styles/getMuiTheme'
const muiTheme = getMuiTheme({
stepper: {
iconColor: 'green' // or logic to change color
}
})
<MuiThemeProvider muiTheme={muiTheme}>
<Stepper>
...
</Stepper>
</MuiThemeProvider>
See https://github.com/callemall/material-ui/blob/master/src/styles/getMuiTheme.js for full list of components and their default color schmemes.
You will see you can override colors on a per component basis and/or change the overall theme colors.
This is a way I used to override it using classes overrides - all other properties remain the same.
const styles = theme => ({
labelContainer: {
"& $alternativeLabel": {
marginTop: 0
}
},
step: {
"& $completed": {
color: "lightgreen"
},
"& $active": {
color: "pink"
},
"& $disabled": {
color: "red"
}
},
alternativeLabel: {},
active: {}, //needed so that the &$active tag works
completed: {},
disabled: {},
labelContainer: {
"& $alternativeLabel": {
marginTop: 0
}
},
});
class myStepper extends Component {
render() {
const { classes } = this.props;
return(
<Stepper
activeStep={activeStep}
alternativeLabel
connector={connector}
classes={{
root: classes.root
}}
>
{this.state.numberTasks.map(label => {
return (
<Step
key={label}
classes={{
root: classes.step,
completed: classes.completed,
active: classes.active
}}
>
<StepLabel
classes={{
alternativeLabel: classes.alternativeLabel,
labelContainer: classes.labelContainer
}}
StepIconProps={{
classes: {
root: classes.step,
completed: classes.completed,
active: classes.active,
disabled: classes.disabled
}
}}
>
{this.state.labels[label - 1]} //label value here
</StepLabel>
</Step>
);
})}
</Stepper>
);
}
export default withStyles(styles)(myStepper);
You can set the classes property for the StepIconProps property:
part of JavaScript styles
...
icon:{
fill:"green",
},
text:{
fill:"white",
},
...
<Step key="someKey">
<StepLabel StepIconProps={{
classes: {
active: classes.icon,
text: classes.text,
}
}}>
Some Text
</StepLabel>
</Step>
Then your style should overwrite the default theme color by using the !important CSS rule:
const styles = theme => ({
icon: {
color: "red !important"
},
});
Wish I could comment the answer by "#Piotr O", in regards to keeping the step numbers but do not have enough rep yet.
You need to set the icon prop to the index of the Step to keep the numbers.
<Stepper activeStep={activeStep}>
{steps.map((label, index) => {
return (
<Step>
<StepLabel icon={index+1} />
</Step>
);
})}
</Stepper>
If you were to use different icons like you mentioned, you'd need some conditional logic to swap the icon via the icon prop or another possibility is to add the className prop to <StepLabel /> when a condition is met and then style it with CSS.
I included an example with both concepts here: https://codesandbox.io/s/l5m570jq0l
I did this via the sx property on the MobileStepper. I specifically wanted to change the colour of the dots indicating progress
<MobileStepper
variant='dots'
steps={maxSteps}
...
sx={{
'.MuiMobileStepper-dot': { backgroundColor: '#CCCCCC' },
'.MuiMobileStepper-dotActive': { backgroundColor: '#666666' },
}}
...
/>
You need to change props icon of a StepLabel component as below:
<StepLabel
icon={<WarningIcon color={red500} />}
style={{color: red500}}
>
Random label
</StepLabel>
We need to pass the class to StepperLabel props . For example if we need to change alternativeLabel class then try the below:-
<StepLabel
StepIconComponent={stepperIcon}
classes={{
alternativeLabel: classes.alternativeLabel,
}}
>
<span className={cn(classes.label, labelClass)}>
{'label'}
</span>
</StepLabel>