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 : )
Related
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.
What can i do to make my makestyles classes more important than default material ui style?
That's my code:
import { createTheme, ThemeProvider } from '#mui/material/styles';
import { makeStyles, createStyles } from '#mui/styles';
const customTheme = createTheme({
palette: {
primary:{
main: '#303030',
},
},
components:{
MuiButton:{
styleOverrides: {
root: {
'&:focus': {
background: "#f00",
},
'&:hover': {
background: "#f00",
},
'&::after': {
content: '"xd"',
color: 'blue',
},
},
contained:{
borderRadius:'50%',
},
},
variants: [
{
props: { variant: 'dashed' },
style: {
textTransform: 'none',
border: `2px dashed #000000`,
},
},
],
},
},
});
const useStyles = makeStyles((theme) =>
//I tried without createStyles too, no change
createStyles({
root: {
},
differentButton:{
backgroundColor: 'green',
fontSize: '30px',
opacity: '80%',
},
//tak sie propsy przekazuje
foo: (props) => ({
backgroundColor: props.backgroundColor,
}),
}),
);
function App() {
const classes = useStyles();
return (
<>
<CssBaseline/>
<Button className={classes.differentButton}>Different</Button>
<RemoveButton variant="contained">Remove Button</RemoveButton>
<ThemeProvider theme={customTheme}>
<Button className={classes.differentButton}>Different</Button>
</ThemeProvider>
</>
);
}
Its overrided by something (default material ui style i think so)
Does it means that with customizing material ui components i can't use makeStyles? I know that i can do that with styled() too but makeStyles way seems better to me.
Ps. I dont want to use !important everywhere hah
There are several solutions.
You can use withStyles, mui v4
withStyles
Use emotion style by styled
styled
Also you can use !important in material-ui
I am currently using material ui and I would like to change the color of my icon class when the active class is triggered by react-router-dom's NavLink
my code is as follows:
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import Paper from "#material-ui/core/Paper";
import Typography from "#material-ui/core/Typography";
import PeopleIcon from "#material-ui/icons/People";
import AssignmentOutlinedIcon from "#material-ui/icons/AssignmentOutlined";
import TransferWithinAStationOutlinedIcon from "#material-ui/icons/TransferWithinAStationOutlined";
import ScheduleIcon from "#material-ui/icons/Schedule";
import { NavLink } from "react-router-dom";
import { BrowserRouter as Router } from "react-router-dom";
const drawerWidth = 220;
const useStyles = makeStyles((theme) => ({
paper: {
width: drawerWidth,
borderBottomLeftRadius: 10,
borderTopLeftRadius: 10,
height: "calc(100% - 10px)",
border: "solid 1px #CCCCCC",
paddingTop: 5
},
icon: {
width: 20,
height: 20,
color: "#999999"
},
listItem: {
textDecoration: "none",
color: "inherit",
padding: 5,
cursor: "pointer",
"&:hover": {
backgroundColor: "#EEEEEE"
}
},
active: {
backgroundColor: "#999999",
color: "white",
"&:hover": {
backgroundColor: "#999999"
}
}
}));
const App = () => {
const classes = useStyles();
const routes = [
{
path: "/admin/users",
name: "Users",
icon: <PeopleIcon className={classes.icon} />
},
{
path: "/admin/assignments",
name: "Assignments",
icon: <AssignmentOutlinedIcon className={classes.icon} />
},
{
path: "/admin/transfers",
name: "Transfers",
icon: <TransferWithinAStationOutlinedIcon className={classes.icon} />
},
{
path: "/admin/liveClock",
name: "Live Clock",
icon: <ScheduleIcon className={classes.icon} />
}
];
return (
<>
<Paper variant="outlined" square className={classes.paper}>
{routes.map((r, i) => {
return (
<Router>
<NavLink
activeClassName={classes.active}
to={r.path}
key={i}
style={{
display: "flex",
alignItems: "center",
paddingLeft: 10
}}
className={classes.listItem}
>
{r.icon}
<Typography
variant="body1"
style={{ marginLeft: 10, fontSize: "15px" }}
>
{r.name}
</Typography>
</NavLink>
</Router>
);
})}
</Paper>
</>
);
};
export default App;
I would like the icon color to be white when the active class is triggered but I cannot seem to target the icon class within the active class.
Please Note: I understand my react router logic is set up incorrectly this is just to allow the active class to be triggered within my code sandbox. Thanks!
attached is a code sandbox for debuggging:
https://codesandbox.io/s/vigilant-curran-iwdtq?file=/src/App.js:0-2628
Try to reference your icon style within your active style:
active: { ...
'& $icon':{ color: '#EEEEEE'}
See it live: https://codesandbox.io/s/so-answer-cute1?file=/src/App.js
I put the activeClassname behavior on hover to show it working, as you did before.
I'm having a bit of difficulties with the theming in Material-UI when it comes to coloring elements. Some elements automatically choose 'theme.palette.main.dark'. I want to know how to force them not to.
For instance the TextField and SpeedDial components automatically choose the dark property from the theme. I've tried to just remove the dark property, but than the TextField is black and the text inside the TextField is unreadable.
My theme file is configured as following:
import {createMuiTheme} from "#material-ui/core";
import {green, indigo, red} from "#material-ui/core/colors";
const theme = createMuiTheme({
palette: {
primary: {
main: indigo.A200,
dark: green.A100
},
white: {
text: '#fff',
},
secondary: {
main: red.A100,
dark: green.A100,
}
}
});
export default theme;
I expect the TextField and SpeedDial to choose the primary color but the actual outcome is that they choose the dark property, probably because it would otherwise interfere with people not being able to see the component properly, but I want to custom choose the colors. I haven't been able to find an explanation on how to change the color for the underline and the float in the TextField component.
https://codesandbox.io/s/material-demo-o52c8
Below is an example with many obnoxious colors on the different aspects of the TextField.
import React from "react";
import ReactDOM from "react-dom";
import TextField from "#material-ui/core/TextField";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles({
root: {
color: "white",
backgroundColor: "fuchsia",
"&.Mui-focused": {
color: "orange",
backgroundColor: "pink"
},
"&:before": {
borderBottomColor: "blue"
},
"&:hover:not(.Mui-focused):before": {
borderBottomColor: "green"
},
"&:after": {
// focused
borderBottomColor: "purple"
}
},
input: {
"&::selection": {
backgroundColor: "lightgreen",
color: "black"
}
}
});
const useLabelStyles = makeStyles({
root: {
color: "brown",
"&.Mui-focused": {
color: "aqua"
}
}
});
function App() {
const classes = useStyles();
const labelClasses = useLabelStyles();
return (
<div className="App">
<TextField
InputProps={{ classes: classes }}
InputLabelProps={{ classes: labelClasses }}
label="label"
defaultValue="text"
/>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Here's the same look, but controlled via the theme:
import React from "react";
import ReactDOM from "react-dom";
import TextField from "#material-ui/core/TextField";
import { createMuiTheme, ThemeProvider } from "#material-ui/core/styles";
const theme = createMuiTheme({
overrides: {
MuiInput: {
root: {
color: "white",
backgroundColor: "fuchsia",
"&.Mui-focused": {
color: "orange",
backgroundColor: "pink"
},
"&:before": {
borderBottomColor: "blue"
},
"&:hover:not(.Mui-focused):before": {
borderBottomColor: "green"
},
"&:after": {
// focused
borderBottomColor: "purple"
}
},
input: {
"&::selection": {
backgroundColor: "lightgreen",
color: "black"
}
}
},
MuiInputLabel: {
root: {
color: "brown",
"&.Mui-focused": {
color: "aqua"
}
}
}
}
});
function App() {
return (
<ThemeProvider theme={theme}>
<div className="App">
<TextField label="label" defaultValue="text" />
</div>
</ThemeProvider>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Related answers:
How do I custom style the underline of Material-UI without using theme?
How can I change the label size of a material ui TextField?
Change InputLabel color of a Select component when clicked/focused
Change outline for OutlinedInput with React 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} />