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

Posted 2023-02-21

【中文标题】使用材质 ui 和 React，在 TextField 中更改 `carrot` 的样式

【英文标题】：Using material ui and React, change the style of the `carrot` in TextField

【发布时间】：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>
        </>     
    )

【参考方案1】：

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

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