我需要修復我的React應用程序的樣式中的一個簡單問題。我想知道為什么我的react應用程序中的CVC文本字段與卡號不對齊。

請檢查這個codesandbox鏈接

點擊這里

<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>;

默認情況下，每個文本字段有8 px的邊距，因此，由三個文本字段(月、年和CVV)組成的flex行與其子字段之間有8px的間距。

有多個修復，第一個是

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

這將迫使該行占用超過100%的16px，因為我們在TextField的兩邊都有8px的邊距，這將幫助我們克服兩邊8px的邊距 另一個解決方案是在右側添加16px的負邊距

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

我建議你使用MUI中的網格組件，因為它也可以幫助你實現響應式設計，下面是將網格作為容器的代碼，為了使它具有響應性，你需要將每個子組件TextField包裝在網格項組件中

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

砂箱項目1 砂箱項目2