时间戳

首页 > 解决方案 > Material Ui TextField如何更改边框颜色

css - Material Ui TextField如何更改边框颜色

问题描述

我无法找到一种方法将 TextField 边框的颜色更改为开始时的灰色以外的颜色。我想把它改成黑色。

这是我的 UpdatePage.js 文件（简化）：

const useStyles = makeStyles(() => ({
    updatePage: {
        display: 'flex',
        justifyContent: 'center',
        marginTop: '100px'
    },
    updateMovementDiv: {
        background: '#00BFFF',
        fontFamily: 'PT Sans Caption',
        fontSize: '18px',
        borderRadius: '10px',
        padding: '20px',
        marginTop: '50px',
    },
    textDiv: {
        background: '#ffffff',
        padding: '8px',
        borderRadius: '10px',
    },
}));

const UpdatePage = () => {
    const classes = useStyles();

    return (
        <div>
            <Header title="Update Movement" />
            <div className={classes.updatePage}>
                <div className={classes.updateMovementDiv}>
                    <form onSubmit={handleSubmit} >
                        <div className={classes.textDiv}>
                            <TextField 
                                name="movementName"
                                variant="outlined"
                                label="Movement Name" 
                                style={{ width:200 }}
                                value={move.movementName}
                                onChange={(e) => setMoveData({ ...moveData, movementName: e.target.value })}
                            />
                            <TextField
                                name="movementWeight" 
                                variant="outlined"
                                label="New One Rep Max" 
                                style={{ width:200 }}
                                InputProps={{endAdornment: <InputAdornment position="end">lb</InputAdornment>}}
                                onChange={(e) => setMoveData({ ...moveData, movementWeight: e.target.value })}
                            />
                        </div>
                         <div className={classes.buttonDiv}>
                            <Button className={classes.updateButton} variant="contained" type="submit" fullWidth endIcon={<LoopIcon />} >Update</Button>
                         </div>
                    </form>
                </div>
            </div>
        </div>
    );
};

export default UpdatePage;

我尝试将类名添加到我的 TextField 标记并从那里更改颜色。

我也尝试将输入属性添加到类中，如下所示：

textField: {
    input: {
        color: 'white'
    }

然后添加：

InputProps={{
        className: classes.input,
    }}

这些都不起作用，TextField 边框保持灰色。任何帮助，将不胜感激。

标签： cssreactjsmaterial-uibordertextfield

解决方案

我猜你只是在写'color'属性，而边框颜色的属性是'borderColor'，将其更改为borderColorfromcolor然后检查它。

推荐阅读