CODEWITHSUNDEEP
javascriptcssreactjsmaterial-ui
Hrutvik Patel
Hrutvik Patel

Reputation: 621

How to style adornment in Material UI TextField?

I am trying to add just the default 14px padding-left set by startAdornment and want to make it so the adornment takes up half of the TextField instead. I can't seem to figure out how to style the startAdornment in general.

I tried style the div itself, this works but there is still an underlying 14px padding left. I tried styling the InputAdornment itself but it seems to have no effect.

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

This is the result of my current code:

enter image description here

This is what I want:

enter image description here

You can ignore the border color difference that doesn't matter I can change that.

Upvotes: 23

Views: 52416

Answers (2)

NearHuscarl
NearHuscarl

Reputation: 81340

You can change the background color of the InputAdornment by removing the padding left of the OutlinedInput and set a matching padding in your adornment (based on the padding of the input here);

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

Codesandbox Demo

Upvotes: 8

Reza Sam
Reza Sam

Reputation: 1334

there are adornedStart and adornedEnd classes in FilledInput and OutlinedInput classes.so you can either use them or use TextField InputProps dependig on what variant you use.

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

here is CodeSandbox

Upvotes: 24

Related Questions