在 React 中，以 -webkit 开头的 CSS 属性名称应该转换成什么情况？

Question

例如-webkit-文本填充颜色

使用

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

给我一个错误“不支持在对象中使用 kebab-case 的 css 属性。您是说 WebkitTextFillColor 吗？”

尝试过

WebkitTextFillColor

、

webkitTextFillColor

、

textFillColor

，但属性不生效。

我问这个问题是因为我正在尝试自定义 DISABLED Material UI TextField 的占位符的颜色。我正在使用 Material UI 版本 5。

Answer 1

您使用此功能有什么具体原因吗？如果没有，您应该使用颜色属性。 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;

Answer 2

尝试使用 className 将其写入从外部导入的 css 文件中。

例如

import 'your css file path';
...

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

导入 css 文件，例如：
css(文件夹) > 你的 css 文件(.css) : 导入 css 类名 { -webkit-text-fill-color: red; }

只需将其写入

global.css

并使用即可。因为

global.css

通常在

App.jsx(tsx)

中声明。
如果没有声明，您可以创建它并使用它。

Answer 3

试试这个：

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