javascript - 如何设置 MUI 轮廓 TextField 的边框样式？

Question

这是我当前对 TextField 组件的设置:

const styles = {
    resize: {
        fontSize: '50px',
    }
}

const textField = (props) => {

    const { classes } = props;

    return (
        <TextField
            value={props.value}
            placeholder={'$'}
            variant={'outlined'}
            onChange={props.onChange}
            autoFocus
            InputProps={{
                classes: {
                    input: classes.resize
                }
            }}
        />
    );
};

export default withStyles(styles)(textField);

单击文本字段时，边框会逐渐消失(变为白色)。我希望边界无论如何都保持不变并且不会褪色。我尝试浏览 material-ui 示例以查找轮廓文本字段，并遇到了具有固定边框但无法使其在我的情况下工作的“裸”文本字段。我想我必须深入了解包装器组件并在某处设置边框的样式？我不确定。

Answer 1

取 self 的深入回答https://github.com/mui-org/material-ui/pull/13105#issuecomment-427459843您可以将样式添加到 notchedOutline 类。

<TextField classes={{ notchedOutline: myClassnameWithCustomStyles }} />

演示:https://codesandbox.io/s/ppmxn3rp9x

这目前有一些限制，我在链接的评论中列出了这一点。