修复 React 中的 TextField 对齐

Question

我需要解决我的 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>;

Answer 1

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

有多个修复，第一个是

<div style={{ display: "flex", width="calc(100% + 16px)" }}>

这将强制行占用超过 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