javascript - 如何在 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

有adornedStart和 adornedEnd FilledInput 中的类(class)和 OutlinedInput classes.so 你可以使用它们或使用TextField
InputProps取决于您使用的变体。

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

这里是 CodeSandbox