could you please tell me How to change label colour and input field colour in error state in material ?
I tried like this
<FormControl>
<TextField
required
error
classes={{
error: this.props.classes.error
}}
InputLabelProps={{
shrink: true,
FormLabelClasses: {
asterisk: this.props.classes.labelAsterisk,
error: this.props.classes.error
}
}}
id="standard-name"
label="Name"
margin="normal"
helperText="Some important text"
/>
</FormControl>
here is the documentation
https://material-ui.com/api/input/
my code
https://codesandbox.io/s/007k3v472w
currently on error state it is showing color of red label and red border of input field .I want green label and green border in input field
any update
The property rules defined in the style object do not override those provided in the default theme because they have less specificity.
For one, the input label error color is given in the CSS selector '.root.error' ignoring Component prefixes added in the selector names.
What selectors are used to target an element can be discovered in the Styles section of your Browser's Developer Console.
This is the same with the color for the asterisk and form helper text error state.
To generate similar selectors you need to write the styles object as:
const styles = {
root: {
'&$error': {
color: "green"
}
},
asterisk: {
'&$error': {
color: "green"
}
},
underline: {
'&$error:after': {
borderBottomColor: "green",
}
},
error: {
}
};
Here I replaced color from red to green.
In the TextField override InputProps.classes, FormHelperTextProps.classes, and InputLabelProps.FormLabelClasses
const { classes } = this.props
//...
return (
<TextField
//...
InputProps={{
classes: {
root: classes.root,
error: classes.error,
underline: classes.underline
}
}}
FormHelperTextProps={{
classes: {
root: classes.root,
error: classes.error
}
}}
InputLabelProps={{
shrink: true,
FormLabelClasses: {
root: classes.root,
asterisk: classes.asterisk,
error: classes.error
}
}}
//...
/>
)
Related
I'm trying to customize Textfiled of material-ui
I was able to change everything I wanted except the color of the label when out of focus
Here image of my problem
by defualt the color is black (when out of focus)
How could I change that?
here is my code:
const useStyles = makeStyles({
notchedOutline: {
color: "red !important", // label foucus color
borderWidth: "1px",
borderColor: "red !important" // border color when out of focus
},
cssOutlinedInput: {
color: "green !important", // text color when out of focus
"&$cssFocused $notchedOutline": {
borderColor: `yellow !important` // border color when Focused
}
},
cssFocused: {
color: "red !important" // text and label color when focued
},
});
<TextField
id="outlined-basic"
label="Username"
variant="outlined"
type="text"
name="username"
error={usernameError.isInvalid ? true : false}
helperText={usernameError.errorHelper}
onChange={e => setUser({ ...user, username: e.target.value })}
InputLabelProps={{
classes: {
root: classes.cssLabel,
focused: classes.cssFocused
}
}}
InputProps={{
classes: {
root: classes.cssOutlinedInput,
focused: classes.cssFocused,
notchedOutline: classes.notchedOutline
},
startAdornment: (
<InputAdornment position="start">
<AccountCircleSharpIcon />
</InputAdornment>
),
}}
/>
I think you already selecting the correct class root: classes.cssLabel in InputLabelProps, but your shared styles doesn't have the styles for it.
InputLabelProps={{
classes: {
root: classes.cssLabel,
focused: classes.cssFocused
}
}}
Adding below in the makeStyles should fix the problem.
cssLabel: {
color: "red"
}
I am styling a required TextField like this
const styles = theme => ({
labelAsterisk: {
color: "red"
},
cssLabel: {
color: "orange"
},
cssRequired: {
"&:before": {
borderBottom: "2px solid orange"
}
},
});
<TextField
id="requiredField"
label="Required Field"
value="Custom Text"
required
InputLabelProps={{
classes: {
root: classes.cssLabel
},
FormLabelClasses: {
asterisk: classes.labelAsterisk
}
}}
InputProps={{
classes: {
underline: classes.cssRequired
}
}}
margin="normal"
/>
I have lots of these required fields in my forms and would like to standardise it instead of copying and pasting large chunks of code.
What is the best way refactor this so that I only need to specify id, label and value each time I use it?
Do I extend TextField?
Create a new component that extends React.Component?
Use a function or a constant?
Here's how you would define your custom TextField component:
const RequiredTextField = ({id, label, value}) => (
<TextField
id={id}
label={label}
value={value}
required
InputLabelProps={{
classes: {
root: classes.cssLabel
},
FormLabelClasses: {
asterisk: classes.labelAsterisk
}
}}
InputProps={{
classes: {
underline: classes.cssRequired
}
}}
margin="normal"
/>
)
And here's how you would use it:
<RequiredTextField id="some-id" label="some-label" value="some-value">
I am trying to change my input field border when I focused to input field.currently it is showing blue.I want to change it to red or other color.
I tried using passing props
function Control(props) {
console.log(props)
return (
<TextField
fullWidth
InputProps={{
inputComponent,
inputProps: {
className: props.selectProps.classes.input,
inputRef: props.innerRef,
children: props.children,
classes:{underline: props.selectProps.classes.underlineInput,
root: props.selectProps.classes.inputRoot,
focused: props.selectProps.classes.focusedLabel,},
...props.innerProps
}
}}
{...props.selectProps.textFieldProps}
/>
);
}
underline: props.selectProps.classes.underlineInput tried to change my input field border color.but it don't work why ?
here is my code
https://codesandbox.io/s/71267zp3l6
Add this class on your CSS file. It uses !important for the override.
.MuiInput-underline-44:after {
border-bottom: 2px solid #9f3063 !important;
}
I have two required fields in my form .I want the asterisk color should be red.Currently it is showing black .I am using material UI react library ?
here is my code
https://codesandbox.io/s/r7lq1jnjl4
documents
https://material-ui.com/demos/text-fields/
<FormControl>
<TextField
required
InputLabelProps={{
shrink: true
}}
id="standard-name"
label="Name"
margin="normal"
helperText="Some important text"
/>
</FormControl>
Based on this documentation on how to customize components through theme overrides for a FormLabel (which will also include InputLabel), you should use createMuiTheme and add the following overrides:
const formLabelsTheme = createMuiTheme({
overrides: {
MuiFormLabel: {
asterisk: {
color: '#db3131',
'&$error': {
color: '#db3131'
},
}
}
}
})
Then, you wrap your <form> within a <MuiThemeProvider> like so:
<MuiThemeProvider theme={formLabelsTheme}>
<form noValidate autoComplete="off">
...
...
...
</form>
</MuiThemeProvider>
Here is a forked code sandbox which demonstrates this code in action.
Since you are already creating a theme, you could just put your overrides in that theme, but you'll need to move your <form> to be within the <MuiThemeProvider> that you already have in your code.
The resulting form labels look like this:
As per the latest version of material UI. ie. "#mui/material": "^5.0.1"
We can do it like this:
<FormLabel required>Name:</FormLabel>
And in the theme:
import { createTheme } from "#mui/material";
export const theme = createTheme({
components: {
MuiFormLabel: {
styleOverrides: {
asterisk: {
color: "#db3131",
"&$error": {
color: "#db3131",
},
},
},
},
},
});
In Mui v5 :
const theme = createTheme({
components: {
MuiFormLabel: {
styleOverrides: {
asterisk: {color:"red"},
},
},
},
})
Alvin's answer shows how to do this globally in your theme. You can also do this on a case-by-case basis using the FormLabel asterisk class via the InputLabel props.
Below are the relevant portions from your code that I changed. Also note that the default behavior for the asterisk is for it to be red if the input is in an "error" state. For instance if you add the error property to the TextField the asterisk will be red, but that also has additional effects on styling beyond the asterisk.
const styles = {
labelAsterisk: {
color: "red"
}
};
<InputLabel
FormLabelClasses={{
asterisk: this.props.classes.labelAsterisk
}}
required
shrink
htmlFor="age-native-simple"
>
Age
</InputLabel>
<TextField
required
InputLabelProps={{
shrink: true,
FormLabelClasses: {
asterisk: this.props.classes.labelAsterisk
}
}}
id="standard-name"
label="Name"
margin="normal"
helperText="Some important text"
/>
const StyledApp = withStyles(styles)(App);
//import createTheme and ThemeProvider at the top
import { createTheme, ThemeProvider } from '#mui/material/styles';
const abc = () => {
//add the theme at the top of your arrow function
const theme = createTheme({
components: {
MuiFormLabel: {
styleOverrides: {
asterisk: { color: "red" },
},
},
},
})
return ( // wrap your jsx with <ThemeProvider>
<ThemeProvider theme={theme}>
<TextField required
id="outlined-required"
label="Full Name"
type="text"
size='small'
/>
</ThemeProvider>
)
}
For those who are looking answer for MUI v5 with TextField outlined variant
const theme = createTheme({
components:{
MuiInputLabel:{
styleOverrides:{
asterisk:{
color:"#d32f2f"
}
}
}
}
});
Try this simple and easy
render(){
const name = <p>Name<span style={{ color: "red" } >*</span></p>
const email = <p>Email<span style={{ color: "red" } >*</span></p>
.
.
.
return (
<div>
<TextField type="text" label={name} />//or Input tag
<TextField type="email" label={email} />//or Input tag
.
.
.
</div>
)
}
Could you please tell me how to remove green color from input field in react? I know it is coming from the theme, I just want to remove from only for this form input and select field.
Codesandbox
const theme = createMuiTheme({
palette: {
primary: green,
secondary: green
},
overrides: {
MuiInput: {
underline: {
color: "red",
"&:hover:not($disabled):after": {},
"&:hover:not($disabled):before": {}
}
}
}
});
I have forked your code example and edited in the theme overrides to change the color of the form label https://codesandbox.io/s/j3763x65y3.
In the test.js file, i have edited in the following:
under styles:
noUnderline: {
color: "grey",
"&:after": {
borderColor: "grey",
color: "grey"
},
}
and as properties for the respective TextField:
<TextField
InputLabelProps={{
shrink: true,
focused: false
}}
InputProps={{
classes: {
focused: classes.noUnderline,
underline: classes.noUnderline
}
}}
</TextField>
I did not quickly find the right classes property to change the focused color of the InputLabel, so I just disabled the focus with focused: false, although this is not a very elegant solution and I would not use it in production.
Since the TextField component is a component composed from other components, check out the API docs for the component https://material-ui.com/api/text-field/ as well as for the components it is composed of.