I'm trying to change the color to border of mui's textfield to white. Can I do this somehow by using style={} in component or do I have to use makeStyles?
<TextField
label="Search login"
variant="outlined"
value={searchLogin}
inputProps={{
style: {
color:"white",
},
}}
InputLabelProps={{
style: {
color: "white",
borderColor : "white",
},
}}
onChange={(e) => {
setSearchLogin(e.target.value);
}}
/>
For those nested element you likely won't be able to use direct styling. Try following:
import * as React from "react";
import { ThemeProvider } from "#mui/system";
import TextField from "#mui/material/TextField";
import { createTheme } from "#material-ui/core/styles"
const styles = createTheme({
notchedOutline: {
borderWidth: "1px",
borderColor: "white !important"
}
});
export default function Example() {
return (
<ThemeProvider theme={styles}>
<TextField
label="Search login"
variant="outlined"
value={searchLogin}
onChange={(e) => { setSearchLogin(e.target.value); }}
/>
</ThemeProvider>
);
}
I am trying to add Material-UI icons into TextField component, I want to add it to the label not in input Field.
Eg:
through Inputprops we can pass and add icon to input, but I want it in label. How to achieve this..?
<Field label="Name" required /> -> Name*
What I want to achieve is:
<Field label="Name" required /> -> Name*(icon)
It can be achieved by using flex and order properties of CSS, lightweight and effective.
Result:
Full code sample :
Code fragment :
const useStyles = makeStyles({
root: {
"& .MuiFormLabel-root": {
display: "flex",
alignItems: "center",
"& .myIcon": {
paddingLeft: "8px",
order: 999
}
}
}
});
const Demo = () => {
const classes = useStyles();
return (
<TextField
className={classes.root}
required
label={
<Fragment>
I am label
<SettingsRounded className="myIcon" fontSize="small" />
</Fragment>
}
variant="outlined"
/>
);
};
Hope to help you !
Because label can accept a ReactNode, you add an icon component to the TextField like this:
import { makeStyles } from "#material-ui/core/styles";
import TextField from "#material-ui/core/TextField";
import Add from "#material-ui/icons/Add";
const useStyles = makeStyles({
root: {
"& label": {
marginTop: -3, // fix the icon alignment issue
}
},
label: {
display: "inline-flex",
alignItems: "center"
}
});
export default function BasicTextFields() {
const classes = useStyles();
return (
<TextField
className={classes.root}
label={
<div className={classes.label}>
<span>My Label</span>
<Add />
</div>
}
variant="outlined"
/>
);
}
Live Demo
I have a Material UI TextField as an input and I need to force the entered text as uppercase. I have tried using textTransform: "uppercase" as part of the style attribute but this does not seem to work. All of the other styling in my component is applied correctly however the textTransform is not.
I have also tried using the standard style method of passing my style as a prop to the component but I get the same result.
My component:
const MenuInput = (props) => {
const useStyles = makeStyles((theme) => ({
input: {
textTransform: "uppercase",
marginTop: "10px",
width: "100%",
borderRadius: 4,
backgroundColor: "#FFFFFF",
},
}));
const classes = useStyles();
return (
<TextField
className={classes.input}
id={props.id}
color="primary"
label={props.label}
variant="filled"
onChange={(e) => props.onChange(e)}
error={props.isError}
helperText={props.error}
/>
);
};
The output:
You could try applying styles through the inputProps like the following:
<TextField
className={classes.input}
id={props.id}
color="primary"
label={props.label}
variant="filled"
onChange={(e) => props.onChange(e)}
error={props.isError}
helperText={props.error}
inputProps={{ style: { textTransform: "uppercase" } }}
/>
I'll leave a link with a sandbox where I tested that solution.
try adding important
textTransform: "uppercase !important"
Or add inline style
<Textfield style={{textTransform:"uppercase"}} />
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'm currently using MUI.
And I'm having issues trying to change the font color of the multiline TextField.
<TextField className = "textfield"
fullWidth
multiline
label = "Debugger"
rows = "10"
margin = "normal"/>
And the CSS:
.textfield {
background-color: #000;
color: green;
}
However, somehow I only get the black background and the font is still black. Does anyone know how to properly change the font color of a TextField using MUI?
In MUI v5, you can just do this using sx prop:
<TextField sx={{ input: { color: 'red' } }} />
A bit longer approach if you want something more reusable:
const options = {
shouldForwardProp: (prop) => prop !== 'fontColor',
};
const StyledTextField = styled(
TextField,
options,
)(({ fontColor }) => ({
input: {
color: fontColor,
},
}));
<StyledTextField label="Outlined" fontColor="green" />
<StyledTextField label="Outlined" fontColor="purple" />
Live Demo
I referred this page TextField API
And I override the TextField using Classes
const styles = theme => ({
multilineColor:{
color:'red'
}
});
Apply the class to TextField using InputProps.
<TextField
className = "textfield"
fullWidth
multiline
InputProps={{
className: classes.multilineColor
}}
label = "Debugger"
rows = "10"
margin = "normal" />
EDIT In older version you have to specify the key input
<TextField
className = "textfield"
fullWidth
multiline
InputProps={{
classes: {
input: classes.multilineColor
}
}}
label = "Debugger"
rows = "10"
margin = "normal"
/>
Hope this will work.
Using inputProps is correct, as others have posted. Here's a slightly simpler example:
<TextField
multiline
inputProps={{ style: { color: "red" } }}
/* ... */
/>
How to set color property and background property of Text Field
import PropTypes from "prop-types";
import { withStyles } from "#material-ui/core/styles";
import TextField from "#material-ui/core/TextField";
const styles = {
root: {
background: "black"
},
input: {
color: "white"
}
};
function CustomizedInputs(props) {
const { classes } = props;
return (
<TextField
defaultValue="color"
className={classes.root}
InputProps={{
className: classes.input
}}
/>
);
}
CustomizedInputs.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(CustomizedInputs);
//textfield customization
const CssTextField = withStyles({
root: {
'& .MuiInputBase-root': {
color: 'white',
},
},
})(TextField);
This should work !
import { TextField, makeStyles } from "#material-ui/core";
const useStyles = makeStyles((theme) => ({
input: {
color: "#FFF",
},
}));
const MyInput = () => {
const classes = useStyles();
return (
<TextField
inputProps={{ className: classes.input }}
id="outlined-basic"
label="Write something..."
variant="outlined"
/>
);
};
export default MyInput;
If you are looking for a more generic fix, you can change your theme to contain that color, in my case I needed to change the input background and the disabled as well, so I end up using the ThemeProvider and a custom Theme.
Custom theme
const theme = createTheme({
components: {
MuiInputBase: {
styleOverrides: {
root: {
backgroundColor: '#fff',
'&.Mui-disabled': {
backgroundColor: '#e4e4e4',
},
},
},
},
},
});
const withDefaultTheme =
<P extends object>(Component: React.ComponentType<P>) =>
(props: any) =>
(
<ThemeProvider theme={theme}>
<Component {...props} />
</ThemeProvider>
);
This is working in my case:
import React from 'react';
import { TextField, } from '#mui/material';
import { makeStyles } from "#mui/styles";
const useStyles = makeStyles((theme) => ({
textfield_input: {
color: `#c5cae9 !important`,
}
}));
function Videoedit() {
const classes = useStyles();
return (<div>
<TextField
value={title}
required
label="Title"
variant="filled"
inputProps={{className: classes.textfield_input}}
color="primary"
focused
/>)
</div>;
}
export default Videoedit;
if you are using styled component with TextField then just write this code inside your styled component:
input: {
color: '#ffffff',
},
if you want to change placeholder color:
label: {
color: '#ffffff',
},
Use your Component like below
const MyTextField = withStyles({
root: {
"& .MuiInputBase-root.Mui-disabled": {
color: "rgba(0, 0, 0,0.0)"
},
"& .MuiFormLabel-root.Mui-disabled": {
color: "rgba(0, 0, 0,0.0)"
},
}
})(TextField);
Try below css
.textfield{
color: #000;
}