修复 React 中的 TextField 对齐

Posted 2023-02-22

【中文标题】修复 React 中的 TextField 对齐

【英文标题】：Fix TextField Alignment in React

【发布时间】：2020-10-19 03:57:15

【问题描述】：

我需要解决我的 React 应用程序样式中的一个简单问题。我想知道为什么我的 react 应用程序中的 CVC TextField 与卡号不一致。

请检查此代码框链接

CLICK HERE

<div style= display: 'flex' >
  <TextField
    variant="outlined"
    label="Expiration Month"
    name="expiryMonth"
    type="text"
    value=values.expiryMonth
    onChange=handleChange
    onBlur=handleBlur
    helperText=touched.expiryMonth ? errors.expiryMonth : ''
    error=touched.expiryMonth && Boolean(errors.expiryMonth)
    fullWidth
    className=classes.margin
    style= flex: 1 
  />

  <TextField
    variant="outlined"
    label="Expiration Year"
    name="expiryYear"
    type="text"
    value=values.expiryYear
    onChange=handleChange
    onBlur=handleBlur
    helperText=touched.expiryYear ? errors.expiryYear : ''
    error=touched.expiryYear && Boolean(errors.expiryYear)
    fullWidth
    className=classes.margin
    style= flex: 1 
  />

  <TextField
    variant="outlined"
    label="CVC"
    name="cvc"
    type="number"
    value=values.cvc
    onChange=handleChange
    onBlur=handleBlur
    helperText=touched.cvc ? errors.cvc : ''
    error=touched.cvc && Boolean(errors.cvc)
    fullWidth
    className=classes.margin
    style= flex: 1 
  />
</div>;

【问题讨论】：

您能否详细说明您的问题？只有 CVC 字段或其他类似到期日期字段也是全宽的？

【参考方案1】：

默认情况下，每个TextField 有 8px 的边距，因此三个文本字段（月、年和 CVV）的 flex 行与它们的子元素有 8 px 的间隙。

有多个修复，第一个是

<div style= display: "flex",  >

这将强制行占用超过 100% 的 16px，因为我们在 TextField 两侧都有 8px 的边距，所以它将帮助我们克服两边的 8px 边距 另一种解决方案是在右侧添加 16px 的负边距

<div style= display: "flex",  margin: "-16px" >

我建议你使用 MUI 中的Grid 组件，因为它还可以帮助你实现响应式设计，下面是使用 Grid 作为容器的代码，为了使其具有响应性，你需要将每个子组件 TextField 包装在Grid项目组件

<Grid
          style= display: "flex", margin: 0 
          container
          direction="row"
          justify="center"
          alignItems="center"
          spacing=2
        >

Sand-box-project-1 Sand-box-project-2

【讨论】：

谢谢。只需使用网格。您能否确定它们是否在移动设备上，到期月份、到期年份和 cvc 将有自己的行，因为很难编写，因为移动设备上的输入非常少。谢谢

我已经更新了Second code box project。现在所有三个文本字段都将在桌面上单独一行，在移动设备上单独一行

谢谢。但是，您可以使每个 TextField 中的间距相同吗？到期年份和CVC在手机屏幕上有很大的差距。请让他们与其他人统一。谢谢

我做了一些改变，但最终你必须根据自己的需要自定义样式，它只是 CSS 没什么大不了的。我强烈建议您了解 MUI 的 styling 并了解如何自定义/覆盖样式，它是一个高度可配置的 UI 库