材质 UI 轮廓文本字段在移动设备的边框中显示轮廓文本答案

【问题标题】：Materiall UI Outlined TextField shows Outlined text in border on mobile devices材质 UI 轮廓文本字段在移动设备的边框中显示轮廓文本
【发布时间】：2020-12-23 17:31:51
【问题描述】：

我想在我的 web 应用程序上使用一个带轮廓的文本字段，它在桌面上工作，但是它在点击移动设备和浏览器后在边框内显示轮廓文本。

这发生在我测试的每个浏览器（Mozilla、Firefox、Chrome）上。

这是一个已知的错误还是我忽略了什么？

const useStyles = makeStyles((theme) => ({
    root: {
        padding: theme.spacing(3),
        flexGrow: 1,
    },
    gridRoot: {
        flexGrow: 1,
        borderColor: theme.palette.primary.light,
        borderRadius: 5,
        borderStyle: "solid",
        border: "1px",
    },
    gridHeader: {
        padding: theme.spacing(2),
        flexGrow: 1,
        backgroundColor: theme.palette.primary.light,
        minWidth: "100%",
        minHeight: 40,
        marginBottom: theme.spacing(2),
    },
    searchField: {
        width: "100%",
        height: "100%",
        marginTop: theme.spacing(1),
        marginBottom: theme.spacing(1),
    },
    sortButton: {
        flexGrow: 1,
        width: "100%",
        height: "100%",
    },
}));

<Grid container className={classes.gridRoot}>
    <Grid container xs={12} justify="center" align="center">
        <Grid item xs={12}>
            <Grid container className={classes.gridHeader} direction="row-reverse">
                <Grid item xs={12} sm={3}>
                    <div
                        style={{
                            background: "red",
                            width: "100%",
                            height: 50,
                        }}
                    />
                </Grid>
                <Grid item xs={12} sm={9}>
                    <TextField
                        id="outlined-search"
                        label="Search field"
                        type="search"
                        variant="outlined"
                        className={classes.searchField}
                        onChange={(event) => console.log(event)}
                    />
                </Grid>
            </Grid>
        </Grid>
    </Grid>
    {/* other content */}
</Grid>;

以下是截图的图片链接：

page on mobile

page on desktop

【问题讨论】：

你能在沙盒中重现吗？
@Domino987 sandbox

标签： reactjs material-ui

【解决方案1】：

一种解决方法是在小型设备上应用边距：

const useStyles = makeStyles((theme) => ({
    root: {
        padding: theme.spacing(3),
        flexGrow: 1,
    },
    gridRoot: {
        flexGrow: 1,
        borderColor: theme.palette.primary.light,
        borderRadius: 5,
        borderStyle: "solid",
        border: "1px",
    },
    gridHeader: {
        padding: theme.spacing(2),
        flexGrow: 1,
        backgroundColor: theme.palette.primary.light,
        minWidth: "100%",
        minHeight: 40,
        marginBottom: theme.spacing(2),
    },
    searchField: {
        width: "100%",
        height: "100%",
        marginTop: theme.spacing(1),
        marginBottom: theme.spacing(1),
        [theme.breakpoints.down('sm')]: {
          backgroundColor: theme.palette.secondary.main,
        },
    },
    searchFieldLabel: {  //<-------------------
        [theme.breakpoints.down('sm')]: {
          marginLeft: 20, //<---- 20 for example
        },
    },
    sortButton: {
        flexGrow: 1,
        width: "100%",
        height: "100%",
    },
}));

和

<TextField
  id="outlined-search"
  label="Search field"
  type="search"
  variant="outlined"
  classes={{root:classes.searchField, label:classes.searchFielLabel}}
  onChange={(event) => console.log(event)}
/>

【讨论】：