如何在Textfield材料ui中设置装饰样式？

Question

我正在尝试仅添加由startAdornment设置的默认14px左填充，并希望将其填充，以使装饰占用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