如何在 Textfield 材料 ui 中设计装饰风格？

Question

我正在尝试仅添加 startAdornment 设置的默认 14px padding-left 并希望使其成为装饰占据 Textfield 的一半。我似乎无法弄清楚一般如何设置 startAdornment 的样式。

我尝试了 div 本身的样式，这有效，但仍然有一个潜在的 14px 填充。我尝试设置 InputAdornment 本身的样式，但似乎没有效果。

InputProps={
    this.state.didChange[rowIndex] ? {
        startAdornment: (
            <InputAdornment
                position="start"
                component="div"
                style={{paddingLeft: '-14px'}}
                disablePointerEvents>
                <div style={{ backgroundColor: '#D3D4D0', marginLeft: '-14px', padding: "10px 13px", width: "26px", color: '#a1a39b' }}>
                    {prevVals[rowIndex]}
                </div>
            </InputAdornment>
        )
    } : null} />

这是我当前代码的结果： 这就是我要的： <-- 您可以忽略无关紧要的边框颜色差异，我可以更改它。

Answer 1

FilledInput和OutlinedInput类中有adornedStart和adornedEnd类。因此您可以使用它们或使用TextField取决于您使用的变体。 InputProps

 <TextField
           name={'text'}
           variant="outlined"
           InputProps={{
               endAdornment:
               <IconButton onClick={()=>0}>x</IconButton>,
               classes: {
                          adornedEnd: classes.adornedEnd
                         }
               }}
           />

这是CodeSandbox

Answer 2

InputAdornment您可以通过删除左侧的填充来更改背景颜色，并在装饰中设置匹配的填充（基于此处OutlinedInput输入的填充）；

import MuiTextField from '@mui/material/TextField';
import { styled } from '@mui/material/styles';

const TextField = styled(MuiTextField)(({ theme }) => ({
  '& .MuiOutlinedInput-root': {
    paddingLeft: 0,
  },
  '& .MuiInputAdornment-root': {
    backgroundColor: theme.palette.divider,
    padding: '28px 14px',
    borderTopLeftRadius: theme.shape.borderRadius + 'px',
    borderBottomLeftRadius: theme.shape.borderRadius + 'px',
  },
}));

<TextField
  placeholder="Password"
  InputProps={{
    startAdornment: (
      <InputAdornment position="start">
        <Visibility />
      </InputAdornment>
    ),
  }}
/>