Ways to customize decoration in Material UI TextField

Struggling to adjust the default 14px padding-left applied by startAdornment in order to make the adornment occupy half of the TextField. Having trouble styling the startAdornment overall.

Attempts to style the div itself have been partially successful, but remnants of the 14px padding left remain. Also tried directly styling the InputAdornment with no visible 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} />

The current code output looks like this:

https://i.sstatic.net/Guov0.png

This is the desired outcome:

https://i.sstatic.net/ssRHo.png

No need to worry about the border color difference as that can be adjusted separately.

javascriptcssreactjsmaterial-ui

Answer №1

Two classes, adornedStart and adornedEnd, are available in the FilledInput and OutlinedInput components. You can choose to use these classes or the TextField component's InputProps depending on the variant you are using.

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

An example of this implementation can be found on CodeSandbox.

Answer №2

To modify the background color of the InputAdornment, adjust the left padding of the OutlinedInput and ensure that the adornment has a corresponding padding (based on the input padding provided 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>
    ),
  }}
/>

https://codesandbox.io/s/56811449-how-to-style-adornment-in-textfield-material-ui-d7vox?file=/demo.tsx

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The communication factor that triggers the expansion of the mother element

I've been struggling with this issue for quite some time. Here is the challenge at hand: I am in the process of developing a library to streamline AJAX calls and neatly display error messages directly within a form. The dilemma: Whenever the messag ...

htmlcss

Tips for utilizing MUI Typography properties in version 5

I'm clear on what needs to be done: obtain the type definition for Typography.variant. However, I'm a bit uncertain on how to actually get these. interface TextProps { variant?: string component?: string onClick?: (event: React.MouseEvent&l ...

javascriptreactjstypescriptmaterial-ui

Unable to retrieve the value from the selected radio button

Below is the provided HTML: <form> <div class="form-group"> <div class="checkbox-detailed male_input"> <input type="radio" name="gender" id="male" value="male"> <label for="male"> ...

javascriptjqueryradio-button

Utilizing Ajax, Jquery, and Struts2 for File Uploading

Can someone please provide guidance on uploading files using a combination of Ajax, jQuery, and Struts2? I have searched through numerous tutorials online but haven't found a suitable solution yet. The goal is to trigger a JavaScript function when a b ...

javascriptjqueryajaxfile-uploadstruts2

What is the process for a Gatsby application to connect with Azure Key Vault?

After successfully deploying my Gatsby App to Azure using the steps outlined in this guide, I've realized that this process differs from deploying a traditional web app. Instead of deploying to the App Service resource, Gatsby apps are deployed to a s ...

reactjsgatsbyazure-keyvaultazure-static-web-app

Angular is failing to retrieve data from FS.readFile using promises

My goal is to utilize an Angular service to decide whether to call fs.readFile or fs.writeFile based on the button pressed, in order to explore the interaction between node and angular promises. Although I have managed to read and write files, I am facing ...

javascriptangularjsnode.jsasynchronouspromise

I plan to compile a collection of names in a text field and then have the ability to select and access each name individually with just a click

I am currently working on a project that involves creating an admin site using Firebase. One of the main features of the site is large text fields that display information which can be modified. For instance, the user management page includes text fields ...

javascripthtmlcssfirebasetextfield

"Troubleshoot: Issue with React's useState hook not correctly updating state within an

I'm running into an issue with updating state using the useState hook in a React functional component. The problem arises when I have an async function (getPalettesPosition) that fetches data based on the current state (paletteFilters). Despite confir ...

javascriptreactjsnext.js

Using JavaScript, the list of items (images) will be displayed and placed into HTML panels

Below is the layout structure on my website: <div class="panel-heading"><h3 class="panel-title">Suggestions</h3></div> <div class="panel-body"> <div class="col-md-7"> <h3><span class= ...

javascriptjquerycsstwitter-bootstrap

Ensuring equal spacing between elements that are defined as a percentage, utilizing padding and margin properties

I've been searching online for a while now, but I haven't been able to find a solution that fits my needs. What I'm trying to do is space out 4 divs equally, each with a width of 25% minus the margin. The challenge is ensuring that the last ...

cssflexbox

Is it possible to implement browser-specific CSS in Next JS without affecting other browsers?

Will Next JS automatically add all necessary browser prefixes to CSS styles defined with style jsx, or do I need to write the browser supports manually in my styles when using Next JS? transform: translate(50%, 50%); -webkit-transform: translate(50%, 50%); ...

cssnext.jswebkit

An element in CSS that has a position of fixed and a width of 100% surpasses the dimensions of its

My element has the CSS properties position:fixed and width:100%, causing it to be larger than its parent elements. Despite the complexity of my code, I have attempted to simplify it for better understanding. Below, you can see that the green box exceeds ...

javascripthtmlcss

Tips for creating a consistent header and footer across an HTML CSS web application

My previous projects involved using ASP.NET MVC and utilizing @Html.Partial("_header") to incorporate common static HTML across different pages. However, my current project is a pure HTML CSS and JS web app with no server-side technology. The la ...

javascriptjqueryhtmlcssasp.net-mvc-4

Utilizing variable values in Google Charts with AngularJS

Hello everyone, I am attempting to display a chart using data obtained from an API. The output of the API is in the form of List<String> and not in JSON format. Here is the snippet of my JS file: google.load('visualization', '1', ...

javascriptangularjsgoogle-visualization

the combination of class and type functions as a jquery selector

<button class="actionButton default" type="submit"> Save</button> Can you select this button by both its class and type using a jQuery selector? I attempted the following, but it did not work: var saveBttn = $('.actionButton.default [ty ...

jquerycss

Guide to organizing an HTML table column with a header click using PHP and MySQL

I am currently working on a table that displays data from a MySQL database. I would like to implement functionality that allows users to click on certain columns to sort them in ascending or descending order. However, I am unsure of whether to use PHP, H ...

javascriptphphtml

Show component depending on the lifecycle of another component

I recently encountered a problem with one of my custom components. I developed a "Chargement" Component (Loading in French) for a project I am currently working on. The component is a basic circular spinner with a dark background that indicates to the use ...

javascriptreactjsreduxmaterial-ui

Which repository is generating this error message?

After discovering an error message, I'm curious to know which repository is responsible for its creation. My intention is to submit a PR to update it. Despite cloning the create-react-app and Babel repositories, I was unable to find any results usi ...

reactjsgithubnpmrepository

There are three pop-up windows displayed on the screen. When each one is clicked, they open as intended, but the information inside does not

Every button triggers a unique modal window Encountering an unusual problem with Bootstrap 5 modal functionality. Within a webpage displaying a list of database entries (refer to the screenshot), each entry features three buttons to open corresponding mod ...

javascriptbootstrap-modalbootstrap-5

I prefer to have the boxes lined up horizontally, but they seem to be arranged vertically

I'm struggling to get the color boxes to display horizontally with spaces between them. Currently, they are showing up vertically in a column layout. I want 4 smaller color boxes within a larger grey box at the top layer, with margins and padding app ...

htmlcss