Material Ui TextField how to change color of border

Question

I haven't been able to find a way to change the color of the TextField border to something other than the grey color it starts off with. I want to change it to black.

Here is my UpdatePage.js file (simplified) :

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;

I have tried adding a classname to my TextField tags and changing the color from there.

I have also tried adding the input property to the class like so:

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

and then adding:

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

None of these have worked, the TextField border stays grey. Any help would be appreciated.

Answer 1

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