E.g. -webkit-text-fill-color
Using '-webkit-text-fill-color': 'red'
got me an error "Using kebab-case for css properties in objects is not supported. Did you mean WebkitTextFillColor?"
Have tried WebkitTextFillColor
, webkitTextFillColor
, and textFillColor
, but the property doesn't take effect.
I'm asking because I'm trying to customize the color of the placeholder of a DISABLED Material UI TextField. I'm using version 5 of Material UI.
CodePudding user response:
Is there any specific reason why you're using this? If not, you should be using color property. MDN does not recommend using this.
<Component styles={{color: 'blue'}} />
UPDATE
This is a MUI-related issue. Here is the answer to "How to override the default placeholder colour of the TextField MUI component" :
import React, {useState, useEffect} from "react";
import {TextField, Theme} from "@mui/material";
import {makeStyles, styled} from "@mui/styles";
const useStyles = makeStyles((theme: Theme) => ({
root: {
'& input::placeholder': { //This is meant to change the place holder color to green
color: 'green !important'
}
}
}))
const MuiTextF = () => {
const classes = useStyles()
return <div style={{background: 'black'}}><TextField placeholder={'i should be green'} className={classes.root}/></div>
}
export default MuiTextF;
UPDATE 2
In order to change disabled version, you should do:
import React from "react";
import {TextField, Theme} from "@mui/material";
import {makeStyles} from "@mui/styles";
const useStyles = makeStyles((theme: Theme) => ({
root: {
'& .Mui-disabled::placeholder': { //This is meant to change the place holder color to green
color: 'green !important'
}
},
}));
const MuiTextF = () => {
const classes = useStyles()
return <div style={{background: 'black'}}><TextField disabled={true} className={classes.root} placeholder={'i should be green'}/>
</div>
}
export default MuiTextF;
CodePudding user response:
Try writing it in a css file imported from outside using className.
for example
import 'your css file path';
...
<Component className="import css class name" />
import css file like:
css(folder) > your css file(.css) : import css class name { -webkit-text-fill-color: red; }
Simply write it in global.css
and use it. Because global.css
is usually declared in App.jsx(tsx)
.
If it is not declared, you can create it and use it.