Material UI TextField组件如何将默认灰色边框修改为黑色

你使用的是Material UI的outlined变体TextField，该组件的边框是通过独立的fieldset元素实现，而非绑定在input输入框上，这是你之前修改input样式不生效的核心原因。按照以下步骤修改即可：

步骤1：更新makeStyles中的样式定义 #

在你原有样式基础上新增textField样式类：

const useStyles = makeStyles(() => ({
    // 保留你原有的updatePage、updateMovementDiv、textDiv等样式
    textField: {
        // 默认状态边框为黑色
        "& .MuiOutlinedInput-notchedOutline": {
            borderColor: "#000",
        },
        // 鼠标悬浮时边框颜色
        "&:hover .MuiOutlinedInput-notchedOutline": {
            borderColor: "#000",
        },
        // 聚焦选中时边框颜色
        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
            borderColor: "#000",
        },
        // 可选：如果需要同步修改标签文字颜色可以添加以下样式
        "& .MuiInputLabel-outlined": {
            color: "#000",
        },
        "&.Mui-focused .MuiInputLabel-outlined": {
            color: "#000",
        }
    },
}));

步骤2：给TextField组件绑定样式 #

给所有需要修改边框的TextField组件添加className={classes.textField}属性即可，示例如下：

<TextField 
    name="movementName"
    variant="outlined"
    label="Movement Name" 
    style={{ width:200 }}
    className={classes.textField} // 新增这一行
    value={move.movementName}
    onChange={(e) => setMoveData({ ...moveData, movementName: e.target.value })}
/>

如果你需要区分不同交互状态的边框颜色，直接修改对应选择器下的borderColor属性值即可。

内容的提问来源于stack exchange，提问作者Victor