Как оформить украшение в текстовом интерфейсе?

Question

Я пытаюсь добавить только стандартный отступ 14px, заданный startAdornment, и хочу сделать так, чтобы украшение занимало половину текстового поля.Кажется, я не могу понять, как стилизовать 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} />

Это результат моего текущего кода: Это то, что я хочу: <- вы можете игнорировать разницу в цвете границы, не важно, что я могу это изменить. </p>