变体不适用于 formControl 输入字段

Question

我想要一个带有变体概述的字段，我不能使用 TextField 组件，因为我想在输入中有一个 endAdornment。

问题是没有应用样式，即使我在 FormControl 组件上指定了 variant='outlined' 属性。

使用 mui/material 5.6.3

import FormControl from '@mui/material/FormControl'
import Input from '@mui/material/Input'
import InputLabel from '@mui/material/InputLabel'
import FormHelperText from '@mui/material/FormHelperText'
import InputAdornment from '@mui/material/InputAdornment'

          <FormControl variant="outlined" fullWidth>
            <InputLabel required>
              password
            </InputLabel>
            <Input
              type='text'
              endAdornment={
                <InputAdornment position="end">
                    <IconButton onClick={handleShowPassword} edge="end">
                       <VisibilityOff />
                    </IconButton>
                </InputAdornment>
              }
              value=" ... "
              onChange={()=>{ / * ... */ }}
            />
            <FormHelperText>Will be used to login to your account</FormHelperText>
          </FormControl>

正在显示：

Answer 1

您仍然可以使用 Material UI 中的 TextField 组件来实现轮廓输入字段。参考 API link https://mui.com/material-ui/api/text-field/

请注意，您必须向 textfield 组件提供变体。使用 InputProps 以便在组件内显示图标。工作演示 link：CodeSandbox Live

变体不适用于 formControl 输入字段

variant is doesn't apply on formControl input field

reactjs

material-ui