Material Ui TextField如何更改边框颜色

Posted 2023-02-22

【中文标题】Material Ui TextField如何更改边框颜色

【英文标题】：Material Ui TextField how to change color of border

【发布时间】：2021-12-07 21:47:04

【问题描述】：

我还没有找到一种方法来将 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 边框保持灰色。任何帮助将不胜感激。

【问题讨论】：

看看this

这是一个较小的问题，它可能会有所帮助。 ***.com/questions/52911169/…

@NearHuscarl 这个链接有帮助，谢谢！

【参考方案1】：

我猜你写的只是'color'属性，边框颜色的属性是'borderColor'，把它从color改成borderColor然后检查。