如何为 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

从我的深入回答中获取https://github.com/mui-org/material-ui/pull/13105#issuecomment-427459843，你可以向notchedOutline类添加样式。

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

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

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