I want to change the global style of the disabled Button component from Material-UI. But the problem is I am unable to keep the original color scheme of the button.
Consider this button:
<Button color="secondary" disabled={isLoading}>Create Account</Button>
Now by default Mui-disabled would be attached to this button. Whose color and the background-color are taken from theme.palatte.action property. So this disabled button would be having CSS as:
color: rgba(0,0,0,0.26);
box-shadow: none;
background-color: rgba(0,0,0,0.12);
But I want my disabled button to maintain its original color ("primary, secondary", "error" etc.) added with an opacity of 0.7. By default, the cursor events are set to none by MUI.
I tried it using the custom theme but I don't know how to maintain the original color of the button. E.g if the Button is primary keep the primary color, if the Button is secondary keep the secondary colors.
MuiButton: {
styleOverrides: {
root: {
textTransform: "none",
boxShadow: "none",
"&.Mui-disabled": {
// background: "initial",
// color: "initial",
opacity: .7
}
},
}
}
Of course, I don't want to write a custom code for each code. I can do this even by creating a wrapper around the MUI's button and use that wrapper everywhere in my code.
But I want to do it the MUI way by overriding the theme.
How can I implement a global solution?
Is this what you want? just don't set the disabledBackground color in the palette:
import Button, { buttonClasses } from "#mui/material/Button";
import { createTheme, ThemeProvider } from "#mui/material/styles";
const defaultTheme = createTheme();
const theme = createTheme({
palette: {
action: {
disabledBackground: "", // don't set the disable background color
disabled: "white", // set the disable foreground color
}
},
components: {
MuiButtonBase: {
styleOverrides: {
root: {
[`&.${buttonClasses.disabled}`]: {
opacity: 0.5
},
// Fix ButtonGroup disabled styles.
[`&.${toggleButtonClasses.root}.${buttonClasses.disabled}`]: {
color: defaultTheme.palette.action.disabled,
borderColor: defaultTheme.palette.action.disabledBackground
}
}
}
}
}
);
At the current time I'm writing. There is also other components that reuses the disableBackground property, make sure you take a look and are okay with that too. I display them all in the example below.
Live Demo
With the way that the disabled state is handled in the default styles, I think you need to redefine the default colors within your override in order for it to work.
In the source code you can find how the default colors are defined for the text, outlined, and contained variants.
The example below demonstrates overriding the disabled styles for all three variants with opacity: 0.7 by redefining the non-disabled colors within the "&.Mui-disabled" style overrides.
import * as React from "react";
import Stack from "#mui/material/Stack";
import Button from "#mui/material/Button";
import { createTheme, ThemeProvider } from "#mui/material/styles";
import { alpha } from "#mui/system";
const defaultTheme = createTheme();
const colors = [
"inherit",
"primary",
"secondary",
"success",
"error",
"info",
"warning"
];
const containedColorStyles = {};
const textColorStyles = {};
const outlinedColorStyles = {};
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
colors.forEach((color) => {
containedColorStyles[`&.MuiButton-contained${capitalizeFirstLetter(color)}`] =
color === "inherit"
? {
backgroundColor: defaultTheme.palette.grey[300],
color: defaultTheme.palette.getContrastText(
defaultTheme.palette.grey[300]
)
}
: {
backgroundColor: defaultTheme.palette[color].main,
color: defaultTheme.palette[color].contrastText
};
textColorStyles[`&.MuiButton-text${capitalizeFirstLetter(color)}`] =
color === "inherit"
? {
color: "inherit"
}
: {
color: defaultTheme.palette[color].main
};
outlinedColorStyles[`&.MuiButton-outlined${capitalizeFirstLetter(color)}`] =
color === "inherit"
? {
color: "inherit",
borderColor:
defaultTheme.palette.mode === "light"
? "rgba(0, 0, 0, 0.23)"
: "rgba(255, 255, 255, 0.23)"
}
: {
color: defaultTheme.palette[color].main,
borderColor: `${alpha(defaultTheme.palette[color].main, 0.5)}`
};
});
const theme = createTheme({
components: {
MuiButton: {
styleOverrides: {
root: {
textTransform: "none",
boxShadow: "none",
"&.Mui-disabled": {
...containedColorStyles,
...textColorStyles,
...outlinedColorStyles,
opacity: 0.7
}
}
}
}
}
});
export default function ColorButtons() {
const variants = ["text", "outlined", "contained"];
return (
<ThemeProvider theme={theme}>
{variants.map((variant) => (
<div key={variant}>
{capitalizeFirstLetter(variant)} Variant
<Stack direction="row" spacing={2}>
{colors.map((color) => (
<Button key={color} variant={variant} color={color}>
{capitalizeFirstLetter(color)}
</Button>
))}
</Stack>
Disabled {capitalizeFirstLetter(variant)} Variant
<Stack direction="row" spacing={2} sx={{ mb: 2 }}>
{colors.map((color) => (
<Button key={color} disabled variant={variant} color={color}>
{capitalizeFirstLetter(color)}
</Button>
))}
</Stack>
</div>
))}
</ThemeProvider>
);
}
I have a nice solution for now.
I use the ownerState props to get the color props. Next, I use it in the theme's palette. The following example illustrates how to do this for a contained button.
let theme = createTheme({
palette: {
// Your custom palette
},
});
theme = createTheme(theme, {
components: {
MuiButton: {
defaultProps: {
disableElevation: true
},
styleOverrides: {
root: ({ ownerState }) => ({
'&.MuiButton-contained.Mui-disabled': {
backgroundColor: theme.palette[ownerState.color].main,
}
}),
}
}
}
});
I am a React newbie. Using Material-UI / React, how can I create my own Button component? Ideally, I would like the component to encapsulate certain properties.
Here is my code.
export const Button = withSytles((theme) => ({
root: {
backgroundColor: theme.palette.primary.main,
minWidth: '100px',
}
}))(MaterialButton);
This code is working however, is there a way to have the component employ all of the properties when I use color="primary" to the Material-UI Button. Do I need to include ALL of the properties or is there an easier way.
Also, I am sure using 100px is not the correct way for this control to be responsive. Is 100em correct or should I use something different?
This is possible in Material-UI v5, you can create a custom variant for your Button. A variant is just a specific styles of a component, each variant is identified by a set of component props. See the example below:
const defaultTheme = createMuiTheme();
const theme = createMuiTheme({
components: {
MuiButton: {
variants: [
{
props: { color: "primary", variant: "contained" },
style: {
backgroundColor: defaultTheme.palette.primary.main,
fontSize: 20,
minWidth: "200px"
}
},
{
props: { color: "secondary", variant: "contained" },
style: {
backgroundColor: defaultTheme.palette.secondary.main
}
}
]
}
}
});
When you render this component:
<Button color="primary" variant="contained">
Primary
</Button>
The first variant style specified above is used because they have the same props:
{ color: "primary", variant: "contained" }
Live Demo
You can create custom variant as mentioned by #NearHuscarl other way you can create component modifying style.
Something like.
import { makeStyles } from '#material-ui/core/styles'
import Button from '#material-ui/core/Button'
import PropTypes from 'prop-types'
const useStyles = makeStyles((theme) => ({
root: {
height: '48px',
width: '100%',
backgroundColor: '#232323',
color: '#fff',
fontSize: '16px',
borderRadius: '4',
minHeight: theme.spacing(6),
'&:hover, &:active, &:focus': {
backgroundColor: `rgba(0, 0, 0, 0.8)`,
},
'&.Mui-disabled': {
opacity: 0.75,
},
},
}))
const propTypes = {
loading: PropTypes.bool,
}
function PrimaryButton({ children, loading = false, ...props }) {
const classes = useStyles()
return (
<Button
variant="contained"
className={classes.root}
disabled={loading}
{...props}
>
{children}
</Button>
)
}
PrimaryButton.propTypes = propTypes
export default PrimaryButton
Created code sandbox
https://codesandbox.io/embed/boring-mayer-cjl0f?fontsize=14&hidenavigation=1&theme=dark
I can't seem to figure out how to change the outline color of an outlined variant TextField
I looked around GitHub issues and people seem to be pointing towards using the TextField "InputProps" Property but this seems to do nothing.
Here is my code in its current state
import React from 'react';
import { withStyles } from '#material-ui/core/styles';
import TextField from '#material-ui/core/TextField';
import PropTypes from 'prop-types';
const styles = theme => ({
field: {
marginLeft: theme.spacing.unit,
marginRight: theme.spacing.unit,
height: '30px !important'
},
});
class _Field extends React.Component {
render() {
const { classes, fieldProps } = this.props;
return (
<TextField
{...fieldProps}
label={this.props.label || "<Un-labeled>"}
InputLabelProps={{ shrink: true }} // stop from animating.
inputProps={{ className: classes.fieldInput }}
className={classes.field}
margin="dense"
variant="outlined"
/>
);
}
}
_Field.propTypes = {
label: PropTypes.string,
fieldProps: PropTypes.object,
classes: PropTypes.object.isRequired
}
export default withStyles(styles)(_Field);
https://codesandbox.io/s/6rx8p
<CssTextField
label="Username"
className="username"
name="username"
onChange={this.onChange}
type="text"
autoComplete="current-password"
margin="normal"
inputProps={{ style: { fontFamily: 'nunito', color: 'white' } }}
/>
//declare the const and add the material UI style
const CssTextField = withStyles({
root: {
'& label.Mui-focused': {
color: 'white',
},
'& .MuiInput-underline:after': {
borderBottomColor: 'yellow',
},
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: 'white',
},
'&:hover fieldset': {
borderColor: 'white',
},
'&.Mui-focused fieldset': {
borderColor: 'yellow',
},
},
},
})(TextField);
Take a look at this, I made a quick demo:
https://stackblitz.com/edit/material-ui-custom-outline-color
It changes the default border color and the label color of the Material-UI TextField but keeps the primary color when focused.
Also, take a look at this link, it gave me the "idea":
https://github.com/mui-org/material-ui/issues/13347
If you want to change the color when focused look at these examples from the documentation:
https://mui.com/components/text-fields/#customization
In case anyone wants to do this with styled-components:
import styled from "styled-components";
import {TextField} from "#material-ui/core";
const WhiteBorderTextField = styled(TextField)`
& label.Mui-focused {
color: white;
}
& .MuiOutlinedInput-root {
&.Mui-focused fieldset {
border-color: white;
}
}
`;
This took me WAY too long to figure out. Hope it helps someone.
const styles = theme => ({
notchedOutline: {
borderWidth: "1px",
borderColor: "yellow !important"
}
});
<TextField
variant="outlined"
rows="10"
fullWidth
InputProps={{
classes: {
notchedOutline: classes.notchedOutline
}
}}
id="standard-textarea"
label="Input Set"
helperText="Enter an array with elemets seperated by , or enter a JSON object"
placeholder="Placeholder"
multiline
value={"" + this.props.input}
onChange={this.props.handleChangeValue("input")}
className={classes.textField}
margin="normal"
/>
The Problem with the Textfield border is that the color you want to set
has a lower specificity than the original style that Material-UI (MUI) sets.
E.g. MUI sets this class when focused:
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
border-color: (some color);
}
which is more specific than a custom selector like:
.Component-cssNotchedOutline {
border-color: #f0f;
}
Solution A (not recommended)
You can add the !important exception to the color, but this is 'bad practice':
import React from 'react';
import { createStyles, TextField, WithStyles, withStyles } from '#material-ui/core';
interface IProps extends WithStyles<typeof styles> {}
const styles = createStyles({
notchedOutline: { borderColor: '#f0f !important' },
});
export const TryMuiA = withStyles(styles)((props: IProps) => {
const { classes } = props;
return ( <TextField variant={ 'outlined' } label={ 'my label' }
InputProps={ {
classes: {
notchedOutline: classes.notchedOutline,
},
} }
/> );
});
Solution B (recommended)
The official MUI example uses other ways to increase specificity.
The 'trick' is not to style the Element directly, like:
.someChildElement { border-color: #f0f }
but to add some extra selectors (more than MUI does*), e.g.:
.myRootElement.someExtra { border-color: #f0f }
or:
.myRootElement .someChildElement { border-color: #f0f }
*(Actually it might be enough to use the same selectors as MUI does,
because if specificity of the selectors is the same,
then the 'later' ones are used. But in case of SSR, the order of the CSS rules might change after rehydration.)
Include the parent: You might have noticed that setting notchedOutline does set the color for the un-focused element, but not for the focused.
That is because the MUI style includes the parent element of the input box (.MuiOutlinedInput-root.Mui-focused).
So you need to include the parent as well.
import React from 'react';
import { withStyles } from '#material-ui/core/styles';
import TextField from '#material-ui/core/TextField';
const styles = {
root: { // - The TextField-root
border: 'solid 3px #0ff', // - For demonstration: set the TextField-root border
padding: '3px', // - Make the border more distinguishable
// (Note: space or no space after `&` matters. See SASS "parent selector".)
'& .MuiOutlinedInput-root': { // - The Input-root, inside the TextField-root
'& fieldset': { // - The <fieldset> inside the Input-root
borderColor: 'pink', // - Set the Input border
},
'&:hover fieldset': {
borderColor: 'yellow', // - Set the Input border when parent has :hover
},
'&.Mui-focused fieldset': { // - Set the Input border when parent is focused
borderColor: 'green',
},
},
},
};
export const TryMui = withStyles(styles)(function(props) {
const { classes } = props;
return (<TextField label="my label" variant="outlined"
classes={ classes }
/>);
})
Note that you can increase specificity in different ways, e.g. this would work as well (a bit different):
'& fieldset.MuiOutlinedInput-notchedOutline': {
borderColor: 'green',
},
Remark: It might seem a little bit 'dirty' to add selectors only to increase specificity,
when you don't really 'need' them. I think it is, but this workaround was sometimes
the only solution since CSS was invented, so it is considered kind of acceptable.
For the latest MUI v5.2.2:
There are two main ways of changing TextField color properties:
1st one is by using InputProps and InputLabelProps:
First you can create a some.module.css file, where you can create your classes:
.input-border {
border-color: #3E68A8 !important;
}
.inputLabel {
color: #3E68A8 !important;
}
.helper-text {
text-transform: initial;
font-size: 1rem !important;
}
after that you can apply them like:
<TextField
sx={{
textTransform: 'uppercase',
}}
FormHelperTextProps={{
classes: {
root: classes['helper-text'],
},
}}
InputProps={{
classes: {
notchedOutline: classes['input-border'],
},
}}
InputLabelProps={{
classes: {
root: classes.inputLabel,
focused: classes.inputLabel,
},
}}
/>
Note the above shows also how to change the color of the FormHelperText!
But if you have multiple input fields, the best way is to override the components that you need by using createTheme from #mui/material/styles
The below example shows some of the components, the rest you can just check in the dev tools, and later on inside the theme file just Ctrl + Space will show you all available components.
Example:
import { createTheme, responsiveFontSizes } from '#mui/material/styles';
const theme = createTheme({
components: {
// CTRL + SPACE to find the component you would like to override.
// For most of them you will need to adjust just the root...
MuiTextField: {
styleOverrides: {
root: {
'& label': {
color: '#3E68A8',
},
'& label.Mui-focused': {
color: '#3E68A8',
},
'& .MuiInput-underline:after': {
borderBottomColor: '#3E68A8',
},
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: '#3E68A8',
},
'&:hover fieldset': {
borderColor: '#3E68A8',
borderWidth: '0.15rem',
},
'&.Mui-focused fieldset': {
borderColor: '#3E68A8',
},
},
},
},
},
MuiFormHelperText: {
styleOverrides: {
root: {
textTransform: 'initial',
fontSize: '1rem',
},
},
},
},
});
export default responsiveFontSizes(theme);
inputProps={{ style: { fontFamily: 'nunito', color: 'white'}}}
The Inputprops works by styling the enterd input data in the textfield and also we can use className for custom coloring..
const CssTextField = withStyles({
root: {
'& label.Mui-focused': {
color: 'white',
},
'& .MuiInput-underline:after': {
borderBottomColor: 'yellow',
},
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: 'white',
},
'&:hover fieldset': {
borderColor: 'white',
},
'&.Mui-focused fieldset': {
borderColor: 'yellow',
},
},
},
This const style works the outer potion of the text filed...
The styling of the outer portion of material UI is above asked for change...
use this overrides CSS property
.MuiFormLabel-root.Mui-focused {
color: red !important;
}
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
border-color: red !important;
}
Extending Peter's answer. You could also change all event colors without the !important:
cssOutlinedInput: {
"&:not(hover):not($disabled):not($cssFocused):not($error) $notchedOutline": {
borderColor: "red" //default
},
"&:hover:not($disabled):not($cssFocused):not($error) $notchedOutline": {
borderColor: "blue" //hovered
},
"&$cssFocused $notchedOutline": {
borderColor: "purple" //focused
}
},
notchedOutline: {},
cssFocused: {},
error: {},
disabled: {}
https://stackblitz.com/edit/material-ui-custom-outline-color-c6zqxp
This is how I solved mine.
I wanted to change the color of the TextField when on foucused. As you already know, material Ui textField default color when on focused is blue. Blue the primary color.
So here was the hack, I went to the outer component App, and then defined a function called createMuiTheme. This fuctions returns an object called pallete. Inside the pallete is where you provide your color overides. You will use ThemeProvider from materia ui to apply your new defined color theme to your app just as below. For more clarification, follow this link https://material-ui.com/customization/palette/
import {createMuiTheme, ThemeProvider} from '#material-ui/core';
import FormInput from './FormInput';
const theme = createMuiTheme({
palette: {
primary: {
main: "your own color", //this overide blue color
light: "your own color", //overides light blue
dark: "your own color", //overides dark blue color
},
},
});
//apply your new color theme to your app component
function App(){
return(
<ThemeProvider theme={theme}> //applies custom theme
<FormInput/>
</ThemeProvider>
)
}
The overrides key enables you to customize the appearance of all instances of a component type,... Material-Ui
In this case there is a short answer, you have to use ThemeProvider and createMuiTheme
import React from 'react';
import {
createMuiTheme,
ThemeProvider
} from '#material-ui/core/styles';
import TextField from '#material-ui/core/TextField';
const theme = createMuiTheme({
palette: {
primary: {
main: '#ff5722' //your color
}
}
});
function CustomTextfield(props) {
return (
<ThemeProvider theme={theme}>
<TextField variant='outlined'/>
</ThemeProvider>
);
}
For a more complete customization you can use the default theme names pallete.
If you dont know where are the names or naming conventions.
Using de browser inspector in the style section is your savior, you can notice how the css chain is made in material-ui.
.MuiFilledInput-root {
position: relative;
transition: background-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
background-color: rgba(255,255,255,0.8);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
MuiFilledInput > root > background-color:
we have to create de theme using the data from the inspector, we only have to place the chain in overrides:{}
const theme = createMuiTheme({
overrides: {
MuiFilledInput: {
root: {
backgroundColor: 'rgba(255,255,255,0.8)',
'&:hover': {
backgroundColor: 'rgba(255,255,255,1)'
},
'&.Mui-focused': {
backgroundColor: 'rgba(255,255,255,1)'
}
}
}
}
});
Now you can make the override using ThemeProvider
import {
createMuiTheme,
ThemeProvider
} from '#material-ui/core/styles';
const theme = createMuiTheme({
overrides: {
MuiFilledInput: {
root: {
backgroundColor: 'rgba(255,255,255,0.8)',
'&:hover': {
backgroundColor: 'rgba(255,255,255,1)'
},
'&.Mui-focused': {
backgroundColor: 'rgba(255,255,255,1)'
}
}
}
}
});
function CustomTextfield(props) {
return (
<ThemeProvider theme={theme}>
<TextField variant='filled' />
</ThemeProvider>
);
}
So for this question you have to search your own components, because have different names.
you can override this style like below
/* for change border color*/
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline{
border-color: #5EA841 !important;
}
/*for change label color in focus state*/
.MuiFormLabel-root.Mui-focused{
color: #212121 !important;
}
Here's how I did it for hover and focused states of the TextField component.
MuiTextField: {
styleOverrides: {
root: {
"& .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline": {
borderColor: "#ffb535",
},
"& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
{
borderColor: "#ffb535",
},
},
},
},
you can refer this code:
styles.js
cssLabel: {
color : 'rgb(61, 158, 116) !important'
},
notchedOutline: {
borderWidth: '1px',
borderColor: 'rgb(61, 158, 116) !important',
color: 'rgb(61, 158, 116)',
},
form.js
<TextField
name="creator"
focused="true"
variant="outlined"
label="Creator"
fullwidth
InputLabelProps={{
classes: {
root: classes.cssLabel,
focused: classes.cssLabel,
},
}}
InputProps={{
classes: {
root: classes.notchedOutline,
focused: classes.notchedOutline,
notchedOutline: classes.notchedOutline,
},
}}
/>
basically, you need to set border color of notchedOutline of the InputProps appropriately.
Below is the code to customize its border color using styled() in MUI v5. The resulted TextField has an extra borderColor prop that lets you pass any color you want, not just the ones from MUI palette.
import { styled } from '#mui/material/styles';
import MuiTextField from '#mui/material/TextField';
const options = {
shouldForwardProp: (prop) => prop !== 'borderColor',
};
const outlinedSelectors = [
'& .MuiOutlinedInput-notchedOutline',
'&:hover .MuiOutlinedInput-notchedOutline',
'& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline',
];
const TextField = styled(
MuiTextField,
options,
)(({ borderColor }) => ({
'& label.Mui-focused': {
color: borderColor,
},
[outlinedSelectors.join(',')]: {
borderWidth: 3,
borderColor,
},
}));
Usage
<TextField label="green" borderColor="green" />
<TextField label="red" borderColor="red" />
<TextField label="blue" borderColor="blue" />
In MUI V5 :
const theme = createTheme({
components: {
MuiInputBase: {
styleOverrides: {
root: {
"&:before":{
borderBottom:"1px solid yellow !imporatnt",}
},
},
},
},
})
In MUI V5, the best way to handle the styles is through the SX props, as shown in the following example:
import * as React from 'react';
import TextField from '#mui/material/TextField';
// 1- Default styles
const rootStyles = {
backgroundColor: '#ffd60a',
border: '3px solid #001d3d',
};
const inputLabelStyles = {
color: '#003566',
textTransform: 'capitalize',
};
const rootInputStyles = {
'&:hover fieldset': {
border: '2px solid blue!important',
borderRadius: 0,
},
'&:focus-within fieldset, &:focus-visible fieldset': {
border: '4px solid red!important',
},
};
const inputStyles = {
color: 'red',
paddingLeft: '15px',
fontSize: '20px',
};
const helperTextStyles = {
color: 'red',
};
export default function InputField({
label = 'default label',
// 2- User custom styles
customRootStyles,
customInputLabelStyles,
customRootInputStyles,
customInputStyles,
customHelperTextStyles,
}) {
return (
<TextField
label={label}
helperText="Please enter a valid input"
sx={{ ...rootStyles, ...customRootStyles }}
InputLabelProps={{
sx: {
...inputLabelStyles,
...customInputLabelStyles,
},
}}
InputProps={{
sx: {
...rootInputStyles,
...customRootInputStyles,
},
}}
inputProps={{
sx: {
...inputStyles,
...customInputStyles,
},
}}
FormHelperTextProps={{
sx: {
...helperTextStyles,
...customHelperTextStyles,
},
}}
/>
);
}
To understand more about how this works, you can checkout the original article through this link.
Here this example on a select input:
import {
FormControl,
InputLabel,
Select,
MenuItem,
OutlinedInput as MuiOutlinedInput,
} from "#material-ui/core";
const OutlinedInput = withStyles((theme) => ({
notchedOutline: {
borderColor: "white !important",
},
}))(MuiOutlinedInput);
const useStyles = makeStyles((theme) => ({
select: {
color: "white",
},
icon: { color: "white" },
label: { color: "white" },
}));
function Component() {
return (
<FormControl variant="outlined">
<InputLabel id="labelId" className={classes.label}>
Label
</InputLabel>
<Select
labelId="labelId"
classes={{
select: classes.select,
icon: classes.icon,
}}
input={<OutlinedInput label="Label" />}
>
<MenuItem>A</MenuItem>
<MenuItem>B</MenuItem>
</Select>
</FormControl>
);
}
For me, I had to use pure css with this:
.mdc-text-field--focused .mdc-floating-label {
color: #cfd8dc !important;
}
.mdc-text-field--focused .mdc-notched-outline__leading,
.mdc-text-field--focused .mdc-notched-outline__notch,
.mdc-text-field--focused .mdc-notched-outline__trailing {
border-color: #cfd8dc !important;
}
// optional caret color
.mdc-text-field--focused .mdc-text-field__input {
caret-color: #cfd8dc !important;
}
J
You can override all the class names injected by Material-UI thanks to the classes property.
Have a look at overriding with classes section and the implementation of the component for more detail.
and finally :
The API documentation of the Input React component. Learn more about the properties and the CSS customization points.
I am using a Snackbar component from MUI. At the moment the Snackbar appears in black. Do you know how I can change the color? Setting background-color only changes the color of the whole div in which the Snackbar is presented. It does not change the color of the Snackbar.
With material-ui 1.0 (or higher) you should override the root CSS class from the SnackbarContent component with the prop ContentProps.
Here is an example:
const styles = {
root: {
background: 'red'
}
};
class MySnackbar extends Component {
render() {
const { classes } = this.props;
return (
<Snackbar
ContentProps={{
classes: {
root: classes.root
}
}}
message={<span>Some message</span>}
/>
);
}
}
export default withStyles(styles)(MySnackbar);
If someone do not want to pass style as props, we can also write a class in a css file and assign it to the ContentProps, like this:
ContentProps={{
classes: {
root: 'errorClass'
}
}}
and in index.css file:
.errorClass { color: 'red' }
With the current material-ui version (4.3.0) there is a even simpler approach than the ContentProps way. Instead of the message attribute you can use a SnackbarContent as child and simply call style={} on it
<Snackbar
open={this.state.showSnackbar}
autoHideDuration={3000}
onClose={() => {this.setState({showSnackbar: false})}}
>
<SnackbarContent style={{
backgroundColor:'teal',
}}
message={<span id="client-snackbar">Hello World</span>}
/>
</Snackbar>
You have to set the bodyStyle property:
<Snackbar bodyStyle={{ backgroundColor: 'teal', color: 'coral' }} />
You can find more info about how you customize the snackbars in the documentation
The root component of the Snackbar only concerns about positioning itself correctly, if you want to change the appearance of the physical Snackbar, you need to target the SnackbarContent via ContentProps prop. In v5, you can use the sx to do that easily:
<Snackbar
ContentProps={{
sx: {
background: "red"
}
}}
Another way is to create a custom variant for your Snackbar:
import { createTheme, ThemeProvider } from "#mui/material/styles";
const theme = createTheme({
components: {
MuiSnackbar: {
variants: [
{
props: { variant: "trouble" },
style: {
"& .MuiSnackbarContent-root": {
background: "orange"
}
}
},
{
props: { variant: "bigTrouble" },
style: {
"& .MuiSnackbarContent-root": {
background: "red"
}
}
}
]
}
}
});
<Snackbar variant="bigTrouble"
To use with typescript, you also need to update the prop type of Snackbar:
declare module "#mui/material/Snackbar" {
interface SnackbarProps {
variant: "trouble" | "bigTrouble";
}
}
With MUI v5 the optimal option to customize Snackbar (background, text color or any other styles) is to use sx prop and specific classNames for variants:
<Snackbar
sx={{
'& .SnackbarItem-variantSuccess': {
backgroundColor: colors.primary, //your custom color here
},
'& .SnackbarItem-variantError': {
backgroundColor: colors.alert, //your custom color here
},
'& .SnackbarItem-variantWarning': {
backgroundColor: colors.attention, //your custom color here
},
'& .SnackbarItem-variantInfo': {
backgroundColor: colors.secondary, //your custom color here
},
}}
autoHideDuration={10000}
//...other props here>
</Snackbar>
The same approach can be applied to notistack library to customize their snackbar.