Style the dropdown element of MUI Select - reactjs

I'm trying to customize the design (borders, radius border) of the drop-down element of the MUI Select component.
The MUI documentation mentions various properties to override and style the various sub-components, but none for the drop-down itself. The reason for it might be that the drop down renders out of the root component, with position absolute relative to the page.
Any idea how I can style the dropdown?
Here is a screenshot of the current state of the component:
I was able to customize the design of the input element of the MUI Select component

Material-UI v4
You can do that in two different ways:
1. At global level
This way all the menus in the application will get the style.
First you need to create a theme.js file:
'use strict';
import { createMuiTheme } from '#material-ui/core/styles';
const theme = createMuiTheme({
overrides: {
// Applied to the <ul> element
MuiMenu: {
list: {
backgroundColor: "#cccccc",
},
},
// Applied to the <li> elements
MuiMenuItem: {
root: {
fontSize: 12,
},
},
},
});
export default theme;
Then import it in your main application component, so it will be applied to all the application components:
'use strict';
import React from "react";
import { ThemeProvider } from '#material-ui/styles';
import CssBaseline from '#material-ui/core/CssBaseline';
import theme from 'theme.js';
export default class App extends React.Component {
render() {
return (
<ThemeProvider theme={theme}>
<CssBaseline />
{/* Your app content */}
</ThemeProvider>
);
}
}
2. At component level
With this approach you can define a different menu style for each component.
'use strict';
import React from "react";
import { makeStyles } from '#material-ui/core/styles';
import Select from "#material-ui/core/Select";
const useStyles = makeStyles({
select: {
"& ul": {
backgroundColor: "#cccccc",
},
"& li": {
fontSize: 12,
},
},
});
export default class MyComponent extends React.Component {
const classes = useStyles();
render() {
return (
<Select MenuProps={{ classes: { paper: classes.select } }} />
);
}
}

You can use the sx prop in MUI v5 to style the Paper which contains a list of MenuItem inside like this:
<Select
fullWidth
value={age}
onChange={handleChange}
MenuProps={{
PaperProps: {
sx: {
bgcolor: 'pink',
'& .MuiMenuItem-root': {
padding: 2,
},
},
},
}}
>
Live Demo

For Material-ui version 0
Apply styles to dropdownMenuprops as stated here Select Properties
const dropdownMenuProps={
menuStyle:{
border: "1px solid black",
borderRadius: "5%",
backgroundColor: 'lightgrey',
},
}
Apply the style to select using dropdownmenuprops
<SelectField
multiple={true}
hintText="Overriden"
value={values}
onChange={this.handleChange}
dropDownMenuProps={dropdownMenuProps}
>
SandBox Demo using version 0.18
For Material-ui Version 1
Dropdown or menu styles are overriden using MenuProps property.
Select-API
Try this
const styles = theme => ({
dropdownStyle:
{
border: "1px solid black",
borderRadius: "5%",
backgroundColor:'lightgrey',
},
});
Apply the style to MenuProps
<Select
value={this.state.age}
onChange={this.handleChange}
inputProps={{
name: "age",
id: "age-simple"
}}
MenuProps={{ classes: { paper: classes.dropdownStyle } }}
>
I tried this in codesandbox and it works for me
Code Sandbox Demo
Read the API of Menu and Select for more details.

For anyone still looking for this in 2022:
MenuProps={{
sx: {
'& .MuiMenu-paper': {
backgroundColor: 'dark.primary',
color: 'text.light'
},
'& .MuiMenuItem-root:hover': {
backgroundColor: 'dark.secondary',
color: 'text.white'
},
'& .Mui-selected': {
backgroundColor: 'primary.main',
color: 'text.white'
}
}
}}
sx={{
color: '#fff',
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
borderColor: 'red',
},
'.MuiSvgIcon-root': {
color: '#fff'
},
'&:before': {
borderBottom: `1px solid ${DarkTheme.palette.primary.light}`
},
'&:hover': {
':before': {
borderBottom: `1px solid ${DarkTheme.palette.primary.dark}`
}
},
'& .MuiMenuItem-root': {
backgroundColor: 'dark.primary'
},
'& .MuiMenu-paper': {
backgroundColor: 'dark.primary'
}
}}

Related

mui v5 what is the best way to use style with pragmatic condition?

I'm upgrading a project from material ui v4 to v5 and struggle to update classes/styles properly.
this is a sandBox :
https://codesandbox.io/s/69629346-mui-v5-theming-with-emotion-mui-forked-2j8vze?file=/demo.tsx:1611-1618
In this code 2 box are displayed with 2 ways of applying style. I want to avoid using makeStyles and use SX/emotion as recommanded.
So backgroundColor is red, on hover it become blue.
It works on both.
Now if i click the switch, the backgroundColor become yellow, but on hover of second box the color stay blue instead of grey.
what i'm missing ? thanks
import React, { useState } from "react";
import { makeStyles } from "#mui/styles";
import clsx from "clsx";
import { Box, Switch } from "#mui/material";
import { createTheme, ThemeProvider } from "#mui/material/styles";
const theme = createTheme();
const useStyles = makeStyles((theme) => ({
imageWithBorder: {
height: theme.spacing(10),
width: theme.spacing(30),
padding: theme.spacing(2),
margin: theme.spacing(2),
backgroundColor: "red",
"&:hover": {
backgroundColor: "blue"
}
},
greyHover: {
backgroundColor: "yellow",
"&:hover": { backgroundColor: "grey" }
}
}));
const styles = {
imageWithBorder: {
height: 80,
width: 240,
padding: 2,
margin: 2,
backgroundColor: "red",
"&:hover": {
backgroundColor: "blue"
}
},
greyHover: {
backgroundColor: "yellow",
"&:hover": { backgroundColor: "grey" }
}
};
export default function Test() {
const classes = useStyles();
const [checked, setChecked] = useState(false);
return (
<Box sx={{ display: "flex", flexDirection: "column" }}>
<Box>
Enable grey hover : <Switch checked={checked} onChange={handleChange} />
</Box>
<p>1 With clsx & useStyles</p>
<Box
className={clsx(classes.imageWithBorder, checked && classes.greyHover)}
/>
<p>2 With sx & plain styles</p>
<Box sx={[styles.imageWithBorder, checked && styles.greyHover]} />
</Box>
);
function handleChange(event) {
setChecked(event.target.checked);
}
}
export default function BasicUsage() {
return (
<ThemeProvider theme={theme}>
<Test />
</ThemeProvider>
);
}
By some reason mui doesn't accept backgroundColor: "grey". It's not even render it in the output css.
See gif
Instead, use gray or hex value.
https://codesandbox.io/s/69629346-mui-v5-theming-with-emotion-mui-forked-d0npw6?file=/demo.tsx

How to change material UI select border and label

I am trying to change the border of a select component from Material-UI.
So far I've tried:
const styles = theme => ({
root: {
display: "flex",
flexWrap: "wrap",
backgroundColor: "lightgrey"
},
formControl: {
margin: theme.spacing.unit,
minWidth: 120
},
selectEmpty: {
marginTop: theme.spacing.unit * 2
},
cssLabel: {
color: "pink",
"&$cssFocused": {
color: "pink"
}
},
cssFocused: {
color: "pink"
},
underline: {
"&:after": {
borderBottom: "1px solid pink",
borderTop: "1px solid pink"
}
}
});
I can customise TextField etc., but after many many hours, I still can not customise the Select. I tried to pass also an Input, but then you have to customise the Input, which is even worse.
Could someone help me with this sandbox?
https://codesandbox.io/s/material-demo-ecj1k
I would really appreciate it.
Below is an example of overriding the colors of the border (MuiOutlinedInput-notchedOutline), label (MuiInputLabel-root), and selected item text (MuiOutlinedInput-input) for default, hover, and focused states.
import React from "react";
import ReactDOM from "react-dom";
import TextField from "#material-ui/core/TextField";
import MenuItem from "#material-ui/core/MenuItem";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles({
root: {
width: 200,
"& .MuiOutlinedInput-input": {
color: "green"
},
"& .MuiInputLabel-root": {
color: "green"
},
"& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
borderColor: "green"
},
"&:hover .MuiOutlinedInput-input": {
color: "red"
},
"&:hover .MuiInputLabel-root": {
color: "red"
},
"&:hover .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
borderColor: "red"
},
"& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-input": {
color: "purple"
},
"& .MuiInputLabel-root.Mui-focused": {
color: "purple"
},
"& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderColor: "purple"
}
}
});
function App() {
const [age, setAge] = React.useState("");
const classes = useStyles();
return (
<div className="App">
<TextField
className={classes.root}
value={age}
onChange={e => setAge(e.target.value)}
variant="outlined"
label="My Label"
select
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</TextField>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Related answers:
Change border color on Material-UI TextField
Is there a way to style the border color and text color of <TextField/> in Material-UI without using makeStyles
Global outlined override
You can override styling of child element classes e.g.
selectBorder: {
'& .MuiOutlinedInput-notchedOutline': {
borderColor: 'red'
}
}
If you apply className={classes.selectBorder} to your Select component, it will change the border color to red.
Okay in my style overrides for the theme I put this in...
MuiOutlinedInput: {
root: {
'&$focused $notchedOutline': {
borderColor: 'inherit !important'
}
}
}
It seemed to the trick. It didn't address the Label... but it did address the border. I've spent WAY too many hours on this. So it will do for now.
I also spent too long with this problem. In the end I just used a TextField and give it select prop. Then you can style it as the regular textfield.

How to customize material-ui TextField Input underline:after?

I am using Material-ui for React.
I am trying to customize the color of the underline that transitions into place when the user clicks the Mui <TextField> component, which is a result of jss injecting the following CSS:
.MuiInput-underline:after {
border-bottom: 2px solid #303f9f;
}
I am already invested into styled-components theme provider and do not want to bring in the MuiTheme provider in order to use createMuiTheme and override.
I have used styled-components to override styling for many other Mui components, but have been unable to override .MuiInput-underline:after using styled-components.
I am now trying to use Mui's withStyles, but am unsure of the exact style semantics. I've been unsuccessful using InputProps and using classes.
const styles = theme => ({
inputProps: {
underline: {
'&:after': {
border: '2px solid red'
}
}
}
});
const MyTextField = props => {
const { classes, ...rest } = props;
return (
<TextField InputProps={{ inputProps: classes.inputProps }} {...rest} />
);
};
export default withStyles(styles)(MyTextField);
Any thoughts? Thanks.
Here's an example of how to customize the underline using styled-components:
import TextField from "#material-ui/core/TextField";
import styled from "styled-components";
const StyledTextField = styled(TextField)`
/* default */
.MuiInput-underline:before {
border-bottom: 2px solid green;
}
/* hover (double-ampersand needed for specificity reasons. */
&& .MuiInput-underline:hover:before {
border-bottom: 2px solid lightblue;
}
/* focused */
.MuiInput-underline:after {
border-bottom: 2px solid red;
}
`;
export default StyledTextField;
Related answers:
How can I remove the underline of TextField from Material-UI?
How do I custom style the underline of Material-UI without using theme?
You need to omit the inputProps key in styles object.
You also need to provide classses Prop to InputProps:
const styles = theme => ({
underline: {
color: 'red' ,
'&::after': {
border: '2px solid red'
}
}
});
const MyTextField = props => {
const { classes, ...rest } = props;
return (
<TextField InputProps={{ classes: {underline: classes.underline} }} {...rest} />
);
};
You can check this working code sandbox example: https://codesandbox.io/s/material-demo-75w7p?fontsize=14
Here is an example of using withStyles.
const MyTextField = withStyles((theme: Theme) => ({
root: {
"& label.Mui-focused": {
color: theme.palette.primary.dark
},
"& .MuiInput-underline:before": {
borderBottomColor: "green"
},
"& .MuiInput-underline:after": {
borderBottomColor: "green"
},
"& .MuiInputBase-root": {
"& fieldset": {
borderColor: "red"
},
"&:hover fieldset": {
borderColor: "yellow"
},
"&.Mui-focused fieldset": {
borderColor: theme.palette.primary.main
}
},
"& .MuiOutlinedInput-root": {
"& fieldset": {
borderColor: "red"
},
"&:hover fieldset": {
borderColor: "yellow"
},
"&.Mui-focused fieldset": {
borderColor: theme.palette.primary.main
}
}
}
}))(TextField);
https://codesandbox.io/s/material-demo-forked-c2opb?file=/demo.tsx

How to change outline color of Material UI React input component?

I've searched high and low for an answer, in both the docs and other SO questions.
I'm using the createMuiTheme option in a separate JS file to override certain default styling, but am having a hard time understanding how the overrides option works.
Currently my button looks like this:
The code I've got to get this far looks like this:
const theme = createMuiTheme({
...other code,
overrides: {
MuiFormControlLabel: {
focused: {
color: '#4A90E2'
}
},
MuiOutlinedInput: {
focused: {
border: '1px solid #4A90E2'
},
notchedOutline: {
border: '1px solid #4A90E2'
},
},
MuiFormLabel: {
focused: {
color: '1px solid #4A90E2'
}
}
}
)};
Then in my component, I'm using it as such:
import theme from './styles/ThemeStyles';
import { withStyles } from '#material-ui/core/styles';
class SignInForm extends Component {
render() {
const { classes } = this.props;
<form className={classes.container} noValidate autoComplete='off'>
<TextField
id="outlined-email-input"
label="Email"
className={classes.textField}
type="email"
name="email"
autoComplete="email"
margin="normal"
variant="outlined"
/>
</form>
}}
My question is, what am I missing to make my component look so funky? And in the future, how do I know what to target in the overrides option of the ThemeProvider so that I don't run into similar situations?
Thanks to Rudolf Olah's help and pointing me in the right direction! I was able to solve the issue with the following code:
overrides: {
MuiOutlinedInput: {
root: {
position: 'relative',
'& $notchedOutline': {
borderColor: 'rgba(0, 0, 0, 0.23)',
},
'&:hover:not($disabled):not($focused):not($error) $notchedOutline': {
borderColor: '#4A90E2',
// Reset on touch devices, it doesn't add specificity
'#media (hover: none)': {
borderColor: 'rgba(0, 0, 0, 0.23)',
},
},
'&$focused $notchedOutline': {
borderColor: '#4A90E2',
borderWidth: 1,
},
},
},
MuiFormLabel: {
root: {
'&$focused': {
color: '#4A90E2'
}
}
}
To find the class names and CSS properties that you can change, the documentation for the Component API shows a list.
TextField is a special case though, because it combines and renders multiple sub-components, it allows you to pass CSS properties to the Input component and the FormHelperText component.
And the OutlinedInput is a very special case, because it actually uses NotchedInput for the input element which has its own CSS properties.
Looking at the code for the OutlinedInput you can see child selectors being used:
root: {
position: 'relative',
'& $notchedOutline': {
borderColor,
},
// ...
It looks like the issue is that the OutlinedInput doesn't set the styles for the NotchedOutline correctly
You may have some luck with this:
const theme = createMuiTheme({
// ...other code,
overrides: {
// ...
MuiOutlinedInput: {
focused: {
border: '1px solid #4A90E2'
},
'& $notchedOutline': {
border: '1px solid #4A90E2'
},
},
// ...
}
});
This is covered in the docs pretty well here.
Click inside the field labelled "Custom CSS" for a demo.
Here's how this could be done using your original TextField component:
import React from 'react'
import PropTypes from 'prop-types'
import { withStyles } from '#material-ui/core/styles'
import TextField from '#material-ui/core/TextField'
const styles = theme => ({
textField: {
marginLeft: theme.spacing.unit * 3,
marginBottom: '0px',
},
label: {
'&$focused': {
color: '#4A90E2'
},
},
focused: {},
outlinedInput: {
'&$focused $notchedOutline': {
border: '1px solid #4A90E2'
},
},
notchedOutline: {},
})
const CustomOutline = ({classes}) => (
<TextField
id="outlined-email-input"
label="Email"
className={classes.textField}
type="email"
name="email"
autoComplete="email"
margin="normal"
variant="outlined"
InputLabelProps={{
classes: {
root: classes.label,
focused: classes.focused,
},
}}
InputProps={{
classes: {
root: classes.outlinedInput,
focused: classes.focused,
notchedOutline: classes.notchedOutline,
},
}}
/>
)
CustomOutline.propTypes = {
classes: PropTypes.object.isRequired,
}
export default withStyles(styles)(CustomOutline)
I found the solution here: The authors of the framework did not really cover this in the docs that well.
https://github.com/mui-org/material-ui/issues/13557

How to change the border color of MUI TextField

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.

Resources