Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to style adornment in MUI 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.

like image 846
Hrutvik Patel Avatar asked Jun 28 '19 18:06

Hrutvik Patel


People also ask

How do I get TextField Mui value?

MUI TextField Get ValueUse the onChange handler to get the current value from an MUI TextField. In this example I update a state value every time TextField value changes. This is the same state value that is passed to the TextField value prop in the Set Value example.

How do I set TextField width in MUI?

Another method for setting Material-UI TextField width and height is a combination of sx at the TextField root and passing sx styling values to the composing Input component via InputProps . The width is set with TextField prop sx={{width: 300}} . The height is set by passing sx: { height: 80 } to the InputProps prop.


2 Answers

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

like image 181
Reza Sam Avatar answered Sep 21 '22 14:09

Reza Sam


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

like image 39
NearHuscarl Avatar answered Sep 17 '22 14:09

NearHuscarl