修复 React 中的 TextField 对齐

Question

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

请检查此代码框 link

<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）的弹性行与其子项有 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 作为容器的代码，为了使其响应你需要包装每个Grid 项组件

中的子组件 TextField

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

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

修复 React 中的 TextField 对齐

Fix TextField Alignment in React

css

reactjs

material-ui

jss

react-material