Develop Reference

Material UI's Stepper StepLabel Icon issue with undefined

just having issues with trying to implememnt a custom Step Label Icon within the nodes of the Stepper Component provided by Material UI. I am trying to implement an icon within each circle, as seen here from Material UI's demo
however, am coming across an error
Please see my code below. Thanks!
import React from 'react';
import { Typography } from '#material-ui/core';
import { withStyles, styles } from '#material-ui/core/styles';
const styles = theme => ({
checklistHeader: {
fontWeight: 'bold',
marginTop: '80px',
color: 'white'
},
connectorIcon: {
color: theme.palette.text.secondary
},
active: {
backgroundColor: 'green'
}
});
const steps = ['Select campaign settings', 'Select campaign settings', 'Select campaign settings'];
const ColorlibStepIconRoot = styled('div')(({ theme, ownerState }) => ({
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[700] : '#ccc',
zIndex: 1,
color: '#fff',
width: 50,
height: 50,
display: 'flex',
borderRadius: '50%',
justifyContent: 'center',
alignItems: 'center',
...(ownerState.active && {
backgroundImage:
'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
boxShadow: '0 4px 10px 0 rgba(0,0,0,.25)',
}),
...(ownerState.completed && {
backgroundImage:
'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
}),
}));
const ColorlibStepIcon = ({
icon, active, completed, className
}) => {
const icons = {
1: <Icon style={{ color: 'red' }}>create_outline</Icon>,
2: <Icon style={{ color: 'red' }}>star</Icon>,
3: <Icon style={{ color: 'red' }}>people</Icon>,
};
return (
<ColorlibStepIconRoot ownerState={{ completed, active }} className={className}>
{icons[String(icon)]}
</ColorlibStepIconRoot>
);
};
const Stepper = ({ classes }) => {
return (
<React.Fragment>
<Typography variant="h6" align="center" gutterBottom className={classes.checklistHeader}>Please complete the following criterion</Typography>
<Stepper alternativeLabel activeStep={2} style={{ background: 'none' }}>
{steps.map(label => (
<Step key={label}>
<StepLabel StepIconComponent={ColorlibStepIcon}>{label}</StepLabel>
</Step>
))}
</Stepper>
</React.Fragment>
);
};
Stepper.defaultProps = {
};
Stepper.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles, { withTheme: true })(Stepper);
It seems like the styled component is undefined. Is there any way that I can bypass this

The styled() function is only available in v5. You either need to upgrade to MUI v5 using this installation guide or use the older API in v4, (The equivalent is withStyles):
V5
import { styled } from '#mui/material/styles';
const StyledComponent = styled(Component)({
// your styles
});
V4
import { withStyles, styles } from '#material-ui/core/styles';
const StyledComponent = withStyles({
// your styles
})(Component);
You can see the v4 docs here and the v5 docs here.

Slider inside of Modal is not working - React + Material UI

I am trying to attach a custom slider component in an MUI Modal component.
My slider is working pretty good on a storybook, this is the behavior as expected:
But when I add it into the Material UI modal it this is the behavior:
I really don't know what could be happening... I've tried making my custom modal (without MUI), using another slider library and they all behave the same.
I am getting this warning when I try to move my slider on the modal:
Slider.js:770 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event.
Consider marking the event handler as 'passive' to make the page more responsive.
See https://www.chromestatus.com/feature/5745543795965952
This is my slider code (which, to make emphasis, is working perfectly outside of the modal:
import React from "react";
import {
styled,
Grid,
Slider as MUISlider,
InputBase,
Tooltip,
} from "#material-ui/core";
const CustomSlider = styled(MUISlider)(({ theme }) => ({
color: theme.palette.secondary.light,
width: 86,
}));
const GasInput = styled(InputBase)(({ theme }) => ({
color: theme.palette.secondary.light,
width: 48,
height: 32,
border: "1px solid #ECEFF3",
borderRadius: 4,
background: "#FAFCFF",
fontSize: 12,
boxSizing: "border-box",
padding: 12,
}));
const SliderContainer = styled(Grid)({
width: 200,
height: 20,
marginTop: -10,
});
const Input = styled(Grid)({
paddingLeft: 8,
});
export interface SliderProps {
value: number;
min: number;
max: number;
onChangeValue: (value: number) => void;
}
interface Props {
children: React.ReactElement;
open: boolean;
value: number;
}
function ValueLabelComponent(props: Props) {
const { children, open, value } = props;
return (
<Tooltip open={open} enterTouchDelay={0} placement="top" title={value}>
{children}
</Tooltip>
);
}
export function Slider({ min, max, value, onChangeValue }: SliderProps) {
const handleSliderChange = (
_: React.ChangeEvent<unknown>,
value: number | number[]
) => {
onChangeValue(Number(value));
};
const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
onChangeValue(parseInt(event.target.value, 10));
};
return (
<SliderContainer
container
direction="row"
alignItems="center"
justify="flex-end"
>
<Grid item>
<CustomSlider
ValueLabelComponent={ValueLabelComponent}
min={min}
max={max}
value={value}
onChange={handleSliderChange}
/>
</Grid>
<Input item>
<GasInput type="number" value={value} onChange={handleInputChange} />
</Input>
</SliderContainer>
);
}

I created an example using your code. Everything appears to work as expected. Compare your local code to that.

Thanks to #jack.benson answer, I was able to find out what was really going on (Really appreciated sir).
I created a modal component which abstracted the main things of the modal I will use through the entire app:
import React from "react";
import { Modal as MUIModal, Box, styled } from "#material-ui/core";
interface ModalProps {
width: number;
height: number;
children: React.ReactNode;
open: boolean;
}
export function Modal({ width, height, children, open }: ModalProps) {
const ModalContainer = styled(MUIModal)({
height,
width,
margin: "auto",
borderRadius: 12,
});
const ModalBox = styled(Box)({
height,
width,
background: "#FFFFFF",
borderRadius: 12,
outline: "none",
});
return (
<ModalContainer open={open}>
<ModalBox>{children}</ModalBox>
</ModalContainer>
);
}
As you can see, I am using the styled function in order to style my components. And that's what was giving me the problem. I don't know why is the reason, but if I move from styled to makeStyles it will work perfectly, this is the new code of my modal component:
import React from "react";
import { Modal as MUIModal, Box, makeStyles } from "#material-ui/core";
interface ModalProps {
width: number;
height: number;
children: React.ReactNode;
open: boolean;
}
const useStyles = ({ height, width }: Partial<ModalProps>) => makeStyles({
root: {
height: `${height}px`,
width: `${width}px`,
margin: "auto",
borderRadius: 12,
},
box: {
height: `${height}px`,
width: `${width}px`,
background: "#FFFFFF",
borderRadius: 12,
outline: 0,
}
});
export function Modal({ width, height, children, open }: ModalProps) {
const classes = useStyles({ width, height })()
return (
<MUIModal className={classes.root} open={open}>
<Box className={classes.box}>{children}</Box>
</MUIModal>
);
}

Divider color change React Material Ui

I'm working with the divider component of the material ui framework and am stuck with the color changing aspect. With most other components from this framework I've been able to change the color by applying the useStyles() method as such:
const useStyles = makeStyles(theme => ({
textPadding: {
paddingTop: 10,
paddingBottom: 10,
color:'white',
},
}));
But I'm not able to change the color of the dividers using the same approach:
const useStyles = makeStyles(theme => ({
dividerColor: {
backgroundColor: 'white',
},
}));
I of-course then apply it to the component:
<Divider classname={classes.dividerColor}></Divider>
I looked up the docs for it but can't figure out what I've done wrong. Could someone give me a helping hand?

use the classes API to change the divider color:
const useStyles = makeStyles((theme) => ({
divider: {
// Theme Color, or use css color in quote
background: theme.palette.divider,
},
}));
<Divider classes={{root: classes.divider}} />
Divider API, To get your head around Material UI Theme

To change Divider line color in MUI v5 you need to adjust your approach depending on whether the element has children or not.
For an empty Divider:
<Divider sx={{ bgcolor: "secondary.light" }} />
For a Divider with content:
<Divider
sx={{
"&::before, &::after": {
borderColor: "secondary.light",
},
}}
>
<Typography>Some Text</Typography>
</Divider>
Comparing to the other answers for v5, note that you do not need to nest the SX props under &.MuiDivider-root and you can use the theme properties with the SX shorthand strings (e.g., secondary.light instead of (theme) => theme.palette.secondary.light.

You can use
<Divider style={{ background: 'black' }} variant="middle" />

You have to override the CSS using classes.
<Divider classes={{root: classes.dividerColor}} />
See the Material UI docs on CSS overrides: https://material-ui.com/customization/components/#overriding-styles-with-classes

You can directly add color attribute to the divider like so
<Divider color="#FDA228" sx={{ height: 2, width: '92px' }} />
the result would be something like this

You should always use className while using material-ui styling instead of typical javascript style declaration like classname.
You can refer to the official doc also: https://material-ui.com/styles/basics/#hook-api

Using #mui v5 I recognized this was the only way to make it work for myself.
Note:
Because my Divider item has text, the ::before and ::after css
selectors specify which side of the divider to style.
<Divider
sx={{
'&.MuiDivider-root': {
'&::before': {
borderTop: `thin solid ${theme?.palette.primary['700']}`
}
}
}}
style={{
color: "white",
}}
variant="middle"
> Editing as - {username} </Divider>

Example with className :
const useStyles = makeStyles((theme) => ({
divider: {
background: "white",
},
}));
<Divider className={classes.divider} />

In the latest MUI(v5), This is how it is done:
<Divider
sx={{ bgcolor: (theme) => theme.palette.divider }}
style={{
border: "none",
height: 2,
margin: 0,
}}
/>

You can do it with createTheme function inside the react component
const Theme = createTheme({
components: {
MuiDivider: {
variants: [
{
props: { variant: 'dynamic' },
style: {
":before": {
borderTop: "thin solid #ffffff"
},
":after": {
borderTop: "thin solid #ffffff"
},
}
}
]
}
},
})
Use it with the variant key in the html component
<Divider variant={'dynamic'} flexItem></Divider>

How to Change Material-UI Slider Color

I want to change Material UI Slider component color
I have tried to change CSS style and it's not working, then I tried the solution given in this issue and applied this code but it's not working
getMuiTheme:
const muiTheme = getMuiTheme({
slider: {
trackColor: "yellow",
selectionColor: "green"
}
});
and in Component:
<MuiThemeProvider muiTheme={muiTheme}>
<Slider
min={18}
max={90}
ValueLabelComponent={ValueLabelComponent}
defaultValue={40}
/>
</MuiThemeProvider>

It depends what version of Material-UI you are using.
Your code matches Material-UI v0.x:
import React from 'react';
import Slider from 'material-ui/Slider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import { MuiThemeProvider } from 'material-ui';
const muiTheme = getMuiTheme({
slider: {
trackColor: "yellow",
selectionColor: "red"
}
});
export default function V0Slider() {
return (
<MuiThemeProvider muiTheme={muiTheme}>
<Slider
min={18}
max={90}
ValueLabelComponent={0}
defaultValue={40}
/>
</MuiThemeProvider>
);
}
If you are using Material-UI v4, that would be the way to go:
import React from "react";
import Slider from '#material-ui/core/Slider';
import { createMuiTheme } from '#material-ui/core/styles';
import { ThemeProvider } from '#material-ui/styles';
const muiTheme = createMuiTheme({
overrides:{
MuiSlider: {
thumb:{
color: "yellow",
},
track: {
color: 'red'
},
rail: {
color: 'black'
}
}
}
});
export default function V4Slider() {
return (
<ThemeProvider theme={muiTheme}>
<Slider min={18} max={90} defaultValue={40} />
</ThemeProvider>
);
}
If you are using another version of material-ui, let me know which one and i'll try to help.

I did the override with the 'withStyles' of material-ui v4.
This is for the Slider styles :
const CustomSlider = withStyles({
root: {
color: "#6f8eff",
height: 3,
padding: "13px 0",
},
track: {
height: 4,
borderRadius: 2,
},
thumb: {
height: 20,
width: 20,
backgroundColor: "#fff",
border: "1px solid currentColor",
marginTop: -9,
marginLeft: -11,
boxShadow: "#ebebeb 0 2px 2px",
"&:focus, &:hover, &$active": {
boxShadow: "#ccc 0 2px 3px 1px",
},
color: "#fff",
},
})(Slider);
And just after that render your slider :
<CustomSlider
value={value}
onChange={handleChange}
step={20} />
And Color should update, i also update the thumbs here for custom thumbs.
Hope it's helps : )

color change for the loading bar component of material ui

I am trying to learn material ui.
I am trying to change the css of the loading bar.
I referred to the documentation and used colorPrimary classes
but its not changing.
can you tell me how to fix it so taht in future I will fix it myself
providing my code snippet below.
all my code is in ReceipeReviewCardList.js
https://codesandbox.io/s/2zonj08v5r
const styles = {
root: {
flexGrow: 1
},
colorPrimary: {
color: "green"
}
};
render() {
const { classes } = this.props;
return (
<div className={classes.root}>
<LinearProgress
className={classes.colorPrimary}
variant="determinate"
value={this.state.completed}

you can use example as was in the reply of the issue in material ui github project: https://github.com/mui-org/material-ui/issues/12858#issuecomment-421150158
import React, { Component } from 'react';
import { withStyles } from '#material-ui/core/styles';
import { LinearProgress } from '#material-ui/core';
class ColoredLinearProgress extends Component {
render() {
const { classes } = this.props;
return <LinearProgress {...this.props} classes={{colorPrimary: classes.colorPrimary, barColorPrimary: classes.barColorPrimary}}/>;
}
}
const styles = props => ({
colorPrimary: {
backgroundColor: '#00695C',
},
barColorPrimary: {
backgroundColor: '#B2DFDB',
}
});
export default withStyles(styles)(ColoredLinearProgress);
It works perfect.

You can override the background colors with makeStyles.
On makeStyles file:
export const useStyles = makeStyles(() => ({
root: {
"& .MuiLinearProgress-colorPrimary": {
backgroundColor: "red",
},
"& .MuiLinearProgress-barColorPrimary": {
backgroundColor: "green",
},
},
})
Import and use:
import { useStyles } from "./myFile.style";
...
const classes = useStyles();
...
<div className={classes.root}>
<LinearProgress />
</div>

It is because you set the CSS is not correctly,
const styles = {
root: {
flexGrow: 1
},
colorPrimary: {
background: 'green'
}
};
not:
const styles = {
root: {
flexGrow: 1
},
colorPrimary: {
color: "green",
}
};
Hope it help!

If you want to overwrite with sx:
sx={{
'& .MuiLinearProgress-bar1Determinate': {
backgroundColor: 'red',
}
}}
the color of the main bar is set as the BACKGROUNDCOLOR, NOT the COLOR

For Material UI v5 (#mui)
<LinearProgress sx={{
backgroundColor: 'white',
'& .MuiLinearProgress-bar': {
backgroundColor: 'green'
}
}}
variant="determinate"
value={10}/>

I did do it by this way, creating your own theme
import {createMuiTheme, MuiThemeProvider } from '#material-ui/core/styles';
const theme = createMuiTheme({
palette: {
secondary: {
main: '#42baf5'
}
}
})
<MuiThemeProvider theme={theme}>
<LinearProgress color="secondary"/>
</MuiThemeProvider>

An easy workaround i stumbled upon which doesn't seem too much of a hack:
<LinearProgress
className="VolumeBar"
variant="determinate"
value={volume}
/>
.VolumeBar > * { background-color:green; }
.VolumeBar{background-color:gray ;}
The first rule makes the progress appear green(completed part).
The second rule takes care of the uncompleted part .

const BorderLinearProgress = withStyles((theme: Theme) =>
createStyles({
root: {
width: '95%',
height: 10,
borderRadius: 5,
marginTop: 8,
marginBottom: 20
},
colorPrimary: {
backgroundColor: Liquidity.colors.main.pink,
},
bar: {
borderRadius: 5,
backgroundColor: Liquidity.colors.main.yellow,
},
}),
)(LinearProgress);

This worked for me (Material ui version 4):
progressbar: {
background: 'yellow',
'& .MuiLinearProgress-bar': {
backgroundColor: theme.palette.success.main,
},
},
And then
<LinearProgress
className={classes.progressbar}
variant="determinate"
value={30}
/>

That have worked for me !
First set a className to the LinearProgress component
<LinearProgress
className="custom-class"
variant="determinate"
value={MyValue}
/>
then style it from your attached css file as shown in the following :
.custom-class > * { background-color:green !important; }
.custom-class{background-color:gray !important;}
using the !important tag is premordial to override the original color.

style: progress: { color: 'red' },
Component:
<LinearProgress color="inherit" className={classes.progress} />