在 React 中，應將 -webkit 開頭的 CSS 屬性名稱轉換為什么情況？

Question

例如 -webkit-text-fill-color

使用'-webkit-text-fill-color': 'red'給我一個錯誤“不支持對對象中的 css 屬性使用 kebab-case。您是說 WebkitTextFillColor 嗎？”

試過WebkitTextFillColor 、 webkitTextFillColor和textFillColor ，但屬性沒有生效。

我問是因為我正在嘗試自定義 DISABLED Material UI TextField 的占位符的顏色。 我正在使用 Material UI 的第 5 版。

Answer 1

嘗試將其寫入使用 className 從外部導入的 css 文件中。

例如

import 'your css file path';
...

<Component className="import css class name" />

導入 css 文件，如：
css（文件夾）>您的 css 文件（.css）：導入 css class 名稱 { -webkit-text-fill-color: red; }

只需將其寫在global.css中並使用它。 因為global.css通常在App.jsx(tsx)中聲明。
如果未聲明，則可以創建並使用它。

Answer 2

您使用它有什么具體原因嗎？ 如果沒有，您應該使用顏色屬性。 MDN 不推薦使用這個。

<Component styles={{color: 'blue'}} />

更新

這是一個與 MUI 相關的問題。 以下是“如何覆蓋 TextField MUI 組件的默認占位符顏色”的答案：

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;

更新 2

為了更改禁用版本，您應該執行以下操作：

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;