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

Question

I'm using mui textfield per documentation here: https://mui.com/components/text-fields/ . while there's plenty of docs on changing the font of the input text, I have yet to see any docs or resources on how to make the carrot fatter. I'm looking for a style that simulates the console, and I have provided an image below. Below is the code for textinput I'm using, rather standard:

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>
        </>     
    )
}

Answer 1

The reason that there's no documentation on how to make a fatter "caret" is because this is not currently supposed in browsers. You can change the caret color using CSS (eg. caret-color: red; ), but if you want to mimic a console's "fat" caret, you may have to add your own element to the screen and then move it based on the input entered. Here is an old example of one way to do it and another which would also require your own JS implementation.

There is a proposed revision for caret-shape: block; , which appears to be what you're looking for, but that is not currently supported.