Styling the background of the endAdornment in a material-ui textfield using React

I tried following the instructions from this source:

Unfortunately, the example code provided doesn't seem to be functioning properly now.

Is there a way to achieve the same result without having that right margin so that it aligns better with the rounded style of the input field?

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

Even after attempting the solution below, I still couldn't get it to work as expected:

<TextField
          label="Name File"
          id="outlined-start-adornment"
          className={clsx(classes.margin, classes.textField)}
          InputProps={{
            endAdornment: <InputAdornment position="end">.docx</InputAdornment>,
            classes: {
              adornedEnd: classes.adornedEnd
            }
          }}
          variant="outlined"
        />

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

Here is the link to the codesandbox for reference: codesandbox

Any assistance or guidance on this issue would be greatly appreciated!

javascriptcssreactjsmaterial-uitextfield

Answer №1

Great job on getting your code to meet the desired style! To enhance it further, consider implementing this line of code:

background: 'linear-gradient(-90deg, #CCC 30%, #FFF 30%)'

instead of using backgroundColor: "#ccc".

Keep up the good work in coding!

Answer №2

Just a tweak in your code can make it work perfectly:

adornedEnd: {
    backgroundColor: "#ccc",
    height: "2.4rem",
    maxHeight: "3rem",
  }

Don't forget to update InputProps like this:

InputProps={{endAdornment: <InputAdornment className={clsx(classes.adornedEnd)} position="end">.docx</InputAdornment>,
style: {
   paddingRight: "0"
}}}

This simple change should fix the issue. You can find a live demo on codepen.io and also on codesandbox.io

(Remember, you have permission to edit it)

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

Setting up your configuration for create-react-app once you have ejected to start building your very own component library

As I embarked on creating a component library to publish on NPM and reuse in various apps, I decided to start by developing a React app with the help of create-react-app. However, it quickly became apparent that the default configuration of create-react-ap ...

reactjsnpmwebpackcreate-react-app

The CSS styling undergoes a transformation following the integration of Bootstrap

Hey there! I'm new to the world of web development and currently working on creating a simple todo list application. Recently, I revamped my webpage design by incorporating Bootstrap, and the results were pretty exciting! Original Code without Bootst ...

htmlcssdjangobootstrap-4

Swapping out one variable for another

After tweaking my code a bit, I'm still struggling to get it right. User input: !change Hi var A = "Hello" if (msg.content.includes ('!change')) { A = msg.content.replace('!change ', ''); } msg.send(A); //the change ...

javascriptnode.js

What is the mechanism behind the functioning of "3D Meninas" (CSS/Animation)?

Recently stumbled upon a fascinating website called "3D Meninas", showcasing an impressive 3D animation effect. Upon examining the HTML code, I noticed there was no mention of any <script> tags or events, leading me to believe that it operates solely ...

htmlcssanimation3d

Transformation of a create-react-app (CRA) into a dynamic combination of CRA + Next.Js application

I currently have a single page application built with create-react-app, featuring a forum where registered users can post and engage with other functionalities. The forum is currently just a component within the app. To improve SEO, I want to make the for ...

reactjsnext.jssingle-page-applicationcreate-react-appserver-side-rendering

Utilizing the power of THREE.ShaderLib.phong while integrating subsurface scattering within ThreeJS

My mesh utilizes a ShaderMaterial with THREE.ShaderLib.phong uniforms. I have successfully linked the map, bump, and specular maps textures. The code snippet below demonstrates this: defines = {}; defines["USE_MAP"] = ""; defines["USE_BUMPMAP"] = ""; defi ...

javascriptthree.jsfragment-shadervertex-shader

What is the solution for resolving the problem of the cursor jumping to the end when converting numbers in JavaScript?

After exploring the inquiries regarding converting digits in JavaScript, such as What's the solution and the right way to convert digits in JavaScript? and How to convert numbers in JavaScript, and problems with commands to remove non-numeric characte ...

javascriptjquery

When submitting the form, a new browser tab opens displaying a blank PHP script

Currently revamping my website using a template and editing the content with notepad++. Struggling to display a success message on the contact me page after form submission. The issue arises when I submit information in the text boxes and click submit, it ...

javascriptphpajaxhtml

update angular component after deleting an item

After deleting a contact in the table, I'm trying to refresh my contact list page but it's not working. Any suggestions? This is the list of contacts in the contact.component.ts file Swal.fire({ title: 'Do you want to delete this contac ...

javascriptangular

The cookie is not displaying in the web browser

Why are my cookies not showing in the browser? I have tried multiple times, but even though the backend is sending the cookie, it is not being stored in the browser. I have also attempted to use different browsers like Chrome and Microsoft Bing. In Postma ...

javascriptnode.jsreactjsdeployment

Creating reusable components with theme-based Box functionalities

I am trying to create a reusable component without using styled-components, instead utilizing Material-UI's api. I've made good progress so far, however, the settings that rely on theme variables like bgcolor and padding are not functioning as ex ...

reactjsmaterial-ui

Mixing percentage width with a fixed minimum width in CSS results in divs failing to align in a single line

Having an issue with the responsiveness of a website layout that includes three columns (let's say 'A', 'B', and 'C') each 96% high, along with a footer. Columns A and C have a width of 35%, while column B is set to be 30 ...

htmlcssresponsive

Using Ajax with Laravel

Currently, I am attempting to utilize Ajax in Laravel in order to display search results in the "search_results_div" div without requiring the user to navigate away from the page. Unfortunately, I have encountered the following error message: "Column not ...

javascriptjqueryajaxlaravel-4

Using HTML and CSS to create interactive icons that change color when clicked, similar to how a link behaves

Have you ever wondered if there's a way to make an icon act like a link when clicked, just like regular text links turning purple? And not just the last one clicked, but every single icon that gets clicked. Trying to use the :visited pseudo was unsucc ...

javascripthtmljquerycssvisited

Leverage Bootstrap's SASS variables within your React components for streamlined styling

Currently, I am utilizing Bootstrap along with SASS for my React project built using Next.js. The objective now is to integrate the SASS variables from Bootstrap into the scoped SASS modules of the components. /styles/style.scss @import "~bootstrap/s ...

reactjstwitter-bootstrapsassnext.js

How can I implement jQuery Ajax to handle multiple elements on a single webpage?

I recently created a page where users can add items to their "favorites" list using the following JavaScript code: $(function(){ $('.doit-01234').click(function (e) { e.preventDefault(); $.ajax({ url: "https://www.domain. ...

javascriptjqueryajax

I am looking to dynamically fill my form fields with data retrieved from my database through an AJAX call to another PHP file

I am attempting to dynamically populate my form fields with data retrieved from a database row using ajax. The goal is to send the id of the row I need when a specific button is clicked. Although I have managed to successfully fetch the desired row in the ...

javascriptphpajax

Using T and null for useRef in React is now supported through method overloading

The React type definition for useRef includes function overloading for both T|null and T: function useRef<T>(initialValue: T): MutableRefObject<T>; // convenience overload for refs given as a ref prop as they typically start with a null ...

reactjstypescript

What is the best way to make a drop down menu list appear when I click on the parent li, and then show the sub li using JavaScript?

I have a code that includes an image, HTML, and CSS code. Can anyone please tell me how I can set up a drop-down menu list to open the sub <li> elements when I click on a parent <li> using JavaScript? You can see the appearance of the code in t ...

javascriptphphtmlcss

Mobile responsiveness issue with Bootstrap image heights

Creating a website with an image positioned at the top below the navigation bar. Utilizing Bootstrap 4 and CSS for this project. To ensure that the image spans the full width of the screen on larger devices, I employed background-image. For mobile devices, ...

cssimagemobilebootstrap-4height