Develop Reference

Material UI changes style of components

Every time I render component, it's keep changing styles.
import React from 'react';
import FormControl from '#material-ui/core/FormControl';
import MenuItem from '#material-ui/core/MenuItem';
import Select from '#material-ui/core/Select';
import Button from '#material-ui/core/Button';
import { makeStyles } from "#material-ui/core/styles";
import sharedTheme from '../../styling/theme.js';
import { Icon } from '#twilio/flex-ui';
import { withStyles } from '#material-ui/core/styles';
import { makeInternalCall } from './index';
import { StylesProvider } from '#material-ui/core/styles';
import { createGenerateClassName } from '#material-ui/core/styles';
const styles = theme => (sharedTheme(theme));
class InternalDialpad extends React.Component {
.........
render() {
const { classes, manager } = this.props;
const { contact_uri: worker_contact_uri } =
manager.workerClient.attributes;
return (
<div className={classes.boxDialpad}>
<div className={classes.titleAgentDialpad}>Call Agent</div>
<div className={classes.subtitleDialpad}>Select agent</div>
<FormControl className={classes.formControl}>
<Select
value={this.state.selectedWorker}
onChange={this.handleChange}
isClearable
>
{this.state.workerList.map((worker)=> {
const { activity_name } = worker;
const { contact_uri, full_name } = worker.attributes;
return (
contact_uri !== worker_contact_uri &&
activity_name !== "Offline"
) ? (
<MenuItem value={contact_uri} key={contact_uri}>
{full_name}
</MenuItem>
) : null
}
)}
</Select>
<div className={classes.buttonAgentDialpad}>
<Button
variant="contained"
color="primary"
disabled={!this.state.selectedWorker}
onClick={this.makeCall}
className={classes.dialPadBtn}
>
<Icon icon="Call"/>
</Button>
</div>
</FormControl>
</div>
)
}
}
export default withStyles(styles)(InternalDialpad);
Theme.js
const sharedTheme = (theme) => ({
root: {
flexGrow: 1,
display: "flex",
flexWrap: "wrap",
},
main:{
margin: 0,
padding: 0
},
formControl: {
width: "250px",
},
boxDialpad: {
borderTop: "1px solid #eeeeee",
},
titleAgentDialpad: {
width: "100%",
textTransform: "uppercase",
textAlign: "center",
fontWeight: "bold",
fontSize: theme.typography.fontSize,
},
subtitleDialpad: {
textTransform: "uppercase",
},
buttonAgentDialpad: {
display: "flex",
justifyContent: "center",
},
dialPadBtn: {
borderRadius: "100px",
minWidth: "0px",
}
});
Now as expected, I can see styles classes are being assigned to each elements, but as soon as I render this component , it changes it's class name or add similar class to that element with additional css styles. Not sure why it is happening.

Material UI components are native HTML elements with additional styles applied as classes in order for them to achieve the clean look that they have out of the box.
Using the component <Button /> for instance is just shorthand for the MUI custom Button component implementation, which includes a native <input type="button" />, several <div />s, and more. Look in your browser dev tools at what renders to the DOM where you imported the MUI elements in your JSX.
The styles you are adding via classes.customClassName extends that default, but is not the only styling on the element. If you need to override these defaults, you can see which classes will be added to each element during render in the API section of each MUI component's documentation.

Unable to change border color when focused and not focused of Material UI Input

I'm not sure why I can't get this to work. I'm selecting the MuiInputBase-root element, telling it to select the field and set the border color to blue, and on focus set the border color to red. What am I doing wrong here?
Codesandbox
import React from "react";
import "./styles.css";
import { makeStyles } from "#material-ui/core/styles";
import FormControl from "#material-ui/core/FormControl";
import OutlinedInput from "#material-ui/core/OutlinedInput";
import InputLabel from "#material-ui/core/InputLabel";
const useStyles = makeStyles(theme => ({
root: {
width: "20rem"
},
label: {
background: "white",
paddingRight: theme.spacing(0.5),
"&.Mui-focused": {
color: theme.palette.secondary.main
}
},
closeIcon: {
color: theme.palette.grey[400],
"&.hidden": {
display: "none"
}
},
searchIcon: {
color: theme.palette.primary.main
}
}));
const useOutlinedInputStyles = makeStyles({
root: {
"& .MuiInputBase-root": {
"& fieldset": {
borderColor: "blue"
},
"&.Mui-focused fieldset": {
borderColor: "red"
}
}
}
});
export default function App() {
const classes = useStyles();
const outlinedInputStyles = useOutlinedInputStyles();
return (
<div className="App">
<FormControl className={classes.root} variant="outlined">
<InputLabel className={classes.label} htmlFor="search-input">
placeholder
</InputLabel>
<OutlinedInput
classes={outlinedInputStyles}
id="search-input"
labelWidth={70}
/>
</FormControl>
</div>
);
}

The issue is that the .MuiInputBase-root is not a child of the root element (the .MuiOutlinedInput-root element), it's actually exactly the same element, so that layer is unnecessary. Also, type selectors (e.g. fieldset) have lower specificity than class selectors, so &.Mui-focused fieldset does not have sufficient specificity to override the default focused styles. Instead of fieldset you can use the class selector .MuiOutlinedInput-notchedOutline.
So instead of:
root: {
"& .MuiInputBase-root": {
"& fieldset": {
borderColor: "blue"
},
"&.Mui-focused fieldset": {
borderColor: "red"
}
}
}
You should have:
root: {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "blue"
},
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderColor: "red"
}
}
Related answer: Change border color on Material-UI TextField

Set background color of Material UI Snackbar

When I set a className to change the background of Snackbar it does not overwrite it. Instead, when the page renders it momentarily displays the background color that I want and then is immediately overwritten.
I looked at some other Stackoverflow answers and I still can't get it working.
// imports....
import Snackbar from '#material-ui/core/Snackbar';
import createClientsStyle from "../../../PageComponents/Landing/CreateClients/style";
function CreateClients(props) {
//....code
const { classes } = props;
return (
//............code
<div>
<Snackbar
className={classes.snackbarStyle} //<--- here
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
open={true}
autoHideDuration={6000}
ContentProps={{
'aria-describedby': 'message-id',
}}
message={<span id="message-id"><div>Hi there! Some message.</div></span>}
/>
</div>
);
}
CreateClients.propTypes = {
classes: PropTypes.object.isRequired
}
const styles = (theme)=>(createClientsStyle(theme));
export default withStyles(styles)(CreateClients)
Stylesheet
const createClientsStyle = function(theme){
return {
root: {
flexGrow: 1,
position:"relative",
top:"175px"
},
logoContainer:{
position:"relative",
margin:"0 auto",
top:"120px"
},
container: {
marginTop:"0px",
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
},
clientItem:{
fontSize:"2em",
display:"inline-block",
textAlign:"center",
width:"100%",
color:"grey",
'&:hover': {
background: "#8a0eff3b",
transition: "0.4s"
},
},
clientItemSelected: {
background: "#8a0eff3b",
fontSize:"2em",
display:"inline-block",
textAlign:"center",
color:"grey",
'&:hover': {
background: "#8a0eff3b",
transition: "0.4s"
},
},
textField:{
width:"25em",
},
listItem:{
fontSize:'35px',//Insert your required size
},
clientButton:{
backgroundColor:"purple"
},
tinyTextClickMe:{
position:"relative",
fontSize:"0.5em",
right:"10%"
},
snackbarStyle:{
backgroundColor:"orange"
}
}
}
export default createClientsStyle

The Snackbar component handles open/close state, transitions, and positioning, but Snackbar delegates control of the look of the Snackbar (e.g. background color, typography, padding) to the SnackbarContent component.
If you look at the Customized snackbars demo, you'll see that it changes the background color by specifying a className on the SnackbarContent element rather than on the Snackbar element. You can also achieve the same effect by specifying the className within the ContentProps.
The example below demonstrates both approaches for specifying the class name for the content.
import React from "react";
import ReactDOM from "react-dom";
import Snackbar from "#material-ui/core/Snackbar";
import SnackbarContent from "#material-ui/core/SnackbarContent";
import { withStyles } from "#material-ui/core/styles";
const styles = {
snackbarStyleViaContentProps: {
backgroundColor: "orange"
},
snackbarStyleViaNestedContent: {
backgroundColor: "lightgreen",
color: "black"
}
};
function App({ classes }) {
return (
<div>
<Snackbar
anchorOrigin={{
vertical: "top",
horizontal: "right"
}}
open={true}
ContentProps={{
"aria-describedby": "message-id",
className: classes.snackbarStyleViaContentProps
}}
message={
<span id="message-id">
<div>Hi there! Some message.</div>
</span>
}
/>
<Snackbar
anchorOrigin={{
vertical: "bottom",
horizontal: "right"
}}
open={true}
>
<SnackbarContent
aria-describedby="message-id2"
className={classes.snackbarStyleViaNestedContent}
message={
<span id="message-id2">
<div>Hi there! Message 2.</div>
</span>
}
/>
</Snackbar>
</div>
);
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);

How to properly set colors on certain elements in Material-ui?

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

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} />