解决方案

Question

我在我的react应用程序和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

让我知道是否有帮助。

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

解决方案

1 个答案: