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;
}
Related
How do I properly change the height of React Material UI v4 Textfield?
The following code messes up the label. Looking for a simple and easy method.
export const useTextFieldStyles = makeStyles({
root: {
minHeight: '42px',
},
});
<TextField
{...params}
margin="dense"
value={listItem}
InputProps={{
classes: {
input: textFieldStyles.root,
},
}}
/>
Referring to this link: Set TextField height material-ui
You can do this with changing style of mui component in your style classes like this
MuiInputLabel-outlined.MuiInputLabel-shrink
{
padding: .3rem !important;
transform: translate(-14px, -14px) scale(0.7) !important;
}
You can change my params
I am Using MUI and did everything to change the Color of the Text in a MUI Text Field and/or its background Color.
I followed the Documentation and tried:
const CssTextField = styled(TextField)({
And also Things inside the Component, such as
InputProps={{
style: { color: "red" }
}}
or
InputProps={{
color: "red"
}}
Nothing works for me and I don´t know why.
I hope that you can help me.
According to docs, InputProps accepts:
Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.
Therefore, style: { color: "red" } doesn't work because the aforementioned components don't accept the style prop and color prop accepts theme colors such as secondary , error etc.
You can customize the color and background of your TextField with sx prop:
<TextField
id="outlined-basic"
variant="outlined"
sx={{
input: {
color: "red",
background: "green"
}
}}
/>
Can you try
InputProps={{
backgroundColor: "red"
}}
instead of
InputProps={{
color: "red"
}}
Maybe
// Option 1
<TextField style ={{width: '100%'}} />
// Option 2
<TextField fullWidth />
I'm currently trying to customise the textfield of materialUI. Here is what I am trying to change
I am having difficulty trying to access and change the color of the span tag that the text resides in. At the same time, i am also having difficulty in persisting the border color when the textfield is in focus. I do not quite understand how these (peusdo selectors?) work. How & when do i nest them or use them, for that matter.
e.g.
"& .MuiOutlinedInput-root": {
"& fieldset": {
borderColor: "rgba(0, 0, 0, 0.23)" // default
},
"&.Mui-focused fieldset": {
border: "2px solid red" // focus
}
Any help would be much appreciated!
for styling the label of TextField, use the InputLabelProps and target the focused class of the label.
<TextField
InputLabelProps={{ classes: { focused: classes.labelRoot } }}
variant="outlined"
label="Colored Label"
/>
const useStyles = makeStyles((theme) => ({
labelRoot: {
"&&": {
color: "pink"
}
}
}));
In labelRoot class, "&&" is used for increasing the specificity to override the default style.
Here is the working demo:
For styling it in theme:-
const theme = createMuiTheme({
overrides: {
MuiFormLabel:{
root:{
'&$focused':{
color:'green'
}
},
}
}
});
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
}
}}
//...
/>
)
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.