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

Issue

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.

Solution

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;

Answered By - hpertaia