使用材质 ui 和 React，在 TextField 中更改 `carrot` 的样式答案

【问题标题】：Using material ui and React, change the style of the `carrot` in TextField使用材质 ui 和 React，在 TextField 中更改 `carrot` 的样式
【发布时间】：2022-01-24 03:37:50
【问题描述】：

根据此处的文档：https://mui.com/components/text-fields/，我正在使用 MUI textfield。虽然有很多关于更改输入文本字体的文档，但我还没有看到任何关于如何使胡萝卜更胖的文档或资源。我正在寻找一种模拟控制台的样式，我在下面提供了一张图片。下面是我正在使用的textinput 的代码，相当标准：


const translucent = 'rgba(255,255,255,0.1)';


const useStyles = makeStyles((theme: Theme) => createStyles({
    wrapForm : {
        display: "flex",
        justifyContent: "center",
        width: "95%",
        margin: `${theme.spacing(0)} auto`,
        // borderBottom: `0.8px solid ${translucent}`, // @TODO: remove this
    },
    wrapText  : {
        width: "100%"
    },
    button: {
        margin: theme.spacing(1),
    },
    multilineColor:{
        color:'white',
        borderColor: `white !important`,
        filter: 'blur(0.8px)'
    },
    overLayContainer: {
        display: 'grid',
    },

    overLayContainerInner: {
        gridArea: '1 / 1',
    },      
}));


/******************************************************
    @View
******************************************************/




export const TextInput = (props) => {

    const classes = useStyles();

    return (
        <>
            <form className={classes.wrapForm}  noValidate autoComplete="off">
                <TextField 
                    className = {classes.wrapForm}
                    fullWidth
                    multiline
                    InputProps={{className: classes.multilineColor, disableUnderline: true}}
                    rows   = "1"
                    margin = "normal"
                />
            </form>
        </>     
    )
}

【问题讨论】：

标签： javascript css reactjs material-ui

【解决方案1】：

没有关于如何制作更胖的“插入符号”的文档的原因是浏览器目前不支持此功能。您可以change the caret color using CSS（例如caret-color: red;），但是如果您想模仿控制台的“胖”插入符号，您可能必须将自己的元素添加到屏幕上，然后根据输入的输入移动它。 Here is an old example 的一种方法和 another 这也需要您自己的 JS 实现。

caret-shape: block; 有一个 proposed revision，这似乎是您要查找的内容，但目前不支持。

【讨论】：