重新加载页面时，材料文本字段标签被剪切

Question

我在我的反应应用程序和 formik 中使用材料 ui。当使用 f5 重新加载页面时，我所有的文本字段标签都会被剪切，但是当它们从另一个屏幕更改时，这个问题不会出现。

<Grid className="input-grid-right" item xs={6}>
    <TextField
      error = {errors.email && touched.email && errors.email !== '' ? true : false}
      fullWidth
      label="E-mail"
      name="email"
      onBlur={handleBlur}
      onChange={handleChange}
      value={values.email}
      variant="outlined"
    />
    <Typography variant="subtitle2">
      {errors.email && touched.email && errors.email}
    </Typography>
</Grid>

一页示例的完整代码为here：

 .input-grid-right{
      padding: 20px 15px 0px 0px;
      .error-message{
        color: #f44336;
      }
    }

styles：

在重新加载页面之前，输入保持这样 okimage .重新加载时，文本变成这样 error

解决方案

在我页面的页脚中，我有一个在整个屏幕上窃听的库。

l18n国际化

Answer 1

似乎由于某种原因，当您刷新页面时，（PrivateNotchedOutline 的）属性宽度设置为 0。
我会尝试使用 MuiThemeProvider 覆盖宽度：

import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';

const theme = createMuiTheme({
   overrides: {
     PrivateNotchedOutline: {
       legend: {
         width: '265px !important',
       }
     }
   },
 });

然后用 ThemeProvider 包装你的组件：

  <ThemeProvider theme={theme}>
   <Grid>
      <TextField
          fullWidth
          label="Como gostaria de ser chamad  o ou chamada?"
          name="name"
          value={"hello"}
          variant="outlined"
      />
      <Typography variant="subtitle2">
         {errors.email && touched.email && errors.email}
      </Typography>

   </Grid>
  </ThemeProvider>

可以参考这个代码沙箱https://codesandbox.io/s/material-demo-cl261?fontsize=14

如果有帮助，请告诉我。