0

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.

dixylo
  • 58
  • 6

3 Answers3

0

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.

jkim
  • 99
  • 1
  • 1
  • 7
  • Thank you for replying, ジュノ. I've tried your solution, but it didn't work in my case. Anyway, I really appreciate you spending time on this. – dixylo Aug 22 '22 at 14:36
  • Thank you for reply! I'm sorry for not being of any help. Are you solved it another method? – jkim Aug 23 '22 at 07:03
  • Yes, the trick is to use !important. I was inspired by hpertaia's code. Thanks, ジュノ – dixylo Aug 23 '22 at 17:07
  • Thank you for the reply. That's how you solved it. I'm glad you've it resolved. Thanks , dixylo – jkim Aug 24 '22 at 00:41
0

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;
hpertaia
  • 106
  • 6
  • Thanks for replying. I'm using it to customize the disabled colour of the placeholder of the Material UI TextField. The property name Material UI uses to modify the colour is -webkit-text-fill-color. I've tried 'color' but it didn't work. – dixylo Aug 22 '22 at 03:21
  • You shouldn't overwrite Material UI components with pure css. What Material UI version are you using? Do you only need to change color of the text or border as well? I'll provide a working solution.. @dixylo – hpertaia Aug 22 '22 at 03:26
  • 1
    I'm using v5.10.1. It works to use ::placeholder to change the colour of the placeholder when the input is not disabled, but when it's disabled, things became complex. I've customized the text and borders and some other properties, it's just the disabled placeholder colour that stopped me. @hpertaia – dixylo Aug 22 '22 at 03:41
  • @dixylo, i've edited my answer. Let me know if you have other questions. – hpertaia Aug 22 '22 at 03:55
  • @dixylo, no worries, I also realized I didn't provide solution for disabled state. I've updated my answer again.. – hpertaia Aug 22 '22 at 04:40
0

Try this:

['-webkit-text-fill-color']: 'red'
user22287045
  • 1
  • 1