我正在嘗試添加start decoration設置的默認的14px左填充，并想讓它占據TextField的一半。我似乎不知道如何設計start decoration的總體風格。

我嘗試樣式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} />

這是我當前代碼的結果:

這是我想要的:

您可以忽略邊框顏色差異，這沒關系，我可以改變這一點。

FilledInput和OutlinedInput類中有adornedStart和adornedEnd類，因此您可以使用它們或使用TextField InputProps取決于您使用的變量。

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

這是CodeSandbox

您可以通過刪除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>
    ),
  }}
/>