如何在 MUI TextField 中设置装饰风格？

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

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

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>
    ),
  }}
/>