如何在文本字段中让 Material UI 中的两个输入装饰彼此相邻

Question

我查看了文本字段演示，其中它们在开始和结束时显示输入装饰，但我想要在末尾有两个输入装饰，并且我尝试使用 endAdornment: {InputAdornment InputAdornment} 但随后出现错误，指出相邻的 JSX 元素必须具有一个父元素。然后我使用了 div 标签，但随后出现错误，提示我的括号放错了位置。这就是我想要的输入装饰的样子

Answer 1

这是您期望的样子吗？ https://codesandbox.io/s/material-demo-forked-trbit?file=/demo.tsx:1640-2360

    <FormControl fullWidth className={classes.margin} variant="outlined">
      <InputLabel htmlFor="outlined-adornment-amount">Amount</InputLabel>
      <OutlinedInput
        id="outlined-adornment-amount"
        value={values.amount}
        onChange={handleChange("amount")}
        startAdornment={<InputAdornment position="start">$</InputAdornment>}
        endAdornment={
          <>
            <InputAdornment position="start">$</InputAdornment>
            <InputAdornment position="start">$</InputAdornment>
            <InputAdornment position="start">$</InputAdornment>
          </>
        }
        labelWidth={60}
      />
    </FormControl>