In React, what case should a CSS property name beginning with -webkit be converted to?

Question

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.

Answer 1

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;

Answer 2

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.

Answer 3

Try this:

['-webkit-text-fill-color']: 'red'