Customize the underline color of Material-UI's Input component

Trying to create an input component with a white underline. However, the underline color changes to black when hovering over it. It should remain white. Override the underline class as shown in the demo and instructions below. Despite trying to implement this solution, it does not seem to work. Manually inspecting and removing certain styles in the browser resolves the issue.

Example: https://stackblitz.com/edit/yjpf5s (View: )

Style removed manually in browser to achieve desired functionality:

.MuiInput-underline-365:hover:not(.MuiInput-disabled-364):not(.MuiInput-focused-363):not(.MuiInput-error-366):before {
  border-bottom: 2px solid rgba(0, 0, 0, 0.87);

The override class style being utilized:

underline: {

        color: palette.common.white,
        borderBottom: palette.common.white,
        '&:after': {
            borderBottom: `2px solid ${palette.common.white}`,          
        },              
        '&:focused::after': {
            borderBottom: `2px solid ${palette.common.white}`,
        },              
        '&:error::after': {
            borderBottom: `2px solid ${palette.common.white}`,
        },                      
        '&:before': {
            borderBottom: `1px solid ${palette.common.white}`,          
        },
        '&:hover:not($disabled):not($focused):not($error):before': {
            borderBottom: `2px solid ${palette.common.white}`,
        },
        '&$disabled:before': {
            borderBottom: `1px dotted ${palette.common.white}`,
        },              
    },

Edit: The final working solution was:

'&:hover:not($disabled):not($focused):not($error):before': {
    borderBottom: `2px solid ${palette.common.white} !important`,
},
cssmaterial-uijss

Answer №1

Upon examining the source code, I noticed that they have implemented the following structure:

{
   focused: {},
   disabled: {},
   error: {},
   underline: {
    '&:before': {
        borderBottom: '1px solid rgba(255, 133, 51, 0.42)'
    },
    '&:after': {
        borderBottom: `2px solid ${theme.palette.secondary.main}`
    },
    '&:hover:not($disabled):not($focused):not($error):before': {
        borderBottom: `2px solid ${theme.palette.secondary.main}`
    }
}

This implementation has been effective for me.

Answer №2

After being inspired by Guillaume's response, I have created a simplified version of the working code without considering error handling:

const CustomizedWhiteTextField = withStyles({
  root: {
    '& .MuiInputBase-input': {
      color: '#fff', // Adjust text color
    },
    '& .MuiInput-underline:before': {
      borderBottomColor: '#fff8', // Semi-transparent underline
    },
    '& .MuiInput-underline:hover:before': {
      borderBottomColor: '#fff', // Solid underline on hover
    },
    '& .MuiInput-underline:after': {
      borderBottomColor: '#fff', // Solid underline on focus
    },
  },
})(TextField);

To implement this customized component, use:

<CustomizedWhiteTextField
  fullWidth
  onChange={this.handleNameChange}
  value={this.props.name}
/>

Answer №3

Start by inserting your input in this manner

<Input {...props} className='myClass' />

Next, modify your CSS like so:

.gc-input-bottom::after{
    border-bottom: 2px solid $input-border-color-active!important;
    :hover{
        border-bottom: none!important;
    }
}

.gc-input-bottom::before{
    border-bottom: 1px solid $input-border-bottom-color!important;
}

The before selector will display the underline constantly and the after selector will show the underline after clicking on it. Now you can customize it as needed.

Answer №4

As of March 2023, in the current version of MUI, the proper way to implement styling for an input component is as follows:

            <Input
              sx={{ color: "#D8D8D8", ':before': { borderBottomColor: '#808080 !important' }, ':hover:before': { borderBottomColor: 'red !important' }, ':after': { borderBottomColor: 'red !important' }}}
              id="username-input"
              onKeyDown={keyPressedHandler}
              onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                setValues({ ...values, username: event.target.value });
              }}
            />

This specific example demonstrates custom styling for a username input field. The use of !important has been applied across multiple properties to ensure styling priority. It was observed that ':hover:before' required the !important tag for proper functionality, while others may function without it.

Answer №5

consider attempting it this way

.CustomInput-highlight-24:hover:not(.CustomInput-disabled-23):not(.CustomInput-focused-22):not(.CustomInput-error-25):before {
    border-bottom: 2px solid rgb(255, 255, 255) !important;
}

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

Issue encountered while configuring input in ReactJS: the label is conflicting with the input value, causing it to be overwritten when using material.ui components

Hello fellow developers! I am currently facing an issue in my reactJS project. I am using the react-form-hook along with Material-UI's TextField. The problem arises when I input data into a field named cep, triggering a function that fetches content ...

javascriptreactjsmaterial-uireact-hooksreact-hook-form

PHP - designate a separate folder for script and style resources

There seems to have been some discussion about this issue before, but I am struggling to find a solution. I want to add css, js, and asset files to my php framework. However, when calling these files, the path must always match the folder structure like t ...

javaphpcssassets

Creating a div that expands to fill up the remaining height within a flex-child

I'm facing a challenge with a flex container that contains flex children. Within each flex child, there are two stacked divs, the first of which has an unknown height. My goal is to make the second div fill the remaining height available. I've be ...

cssflexbox

Improve the design of the email newsletter

Having some trouble coding a particular element in my email newsletter layout. This is the desired outcome: View Screenshot Here's what I currently have: View Screenshot Any idea what could be going wrong here? Check out the code snippet below: &l ...

htmlcssemailhtml-email

Problem with displaying fonts in web browsers

I decided to create a React App using the Material UI library, but I wanted to customize it by changing the default font from Roboto to Overpass. I successfully imported the fonts using their library. <link rel="preconnect" href="https:// ...

htmlcssreactjsmaterial-uigoogle-fonts

Resize the main container to fit the floated elements

I've been working on constructing a family tree, and the last part of the functionality is proving to be quite challenging for me. My family tree consists of list elements that are all floated to the left. Currently, when the tree expands beyond the ...

javascripthtmlcss

It seems that CSS shadows are working perfectly on Firefox and Chrome, but unfortunately, they are not displaying on

I have encountered an issue where CSS shadows appear fine on Firefox and Chrome, but do not display in Internet Explorer. Below is the code I am using: -moz-box-shadow: 0 0 20px #000; Can anyone provide a solution for this compatibility problem? Thank ...

htmlcss

Customize the CSS styling of third-party components in different pages using NextJS

When working with third-party components, you can include their styles by importing their stylesheet into your component or _app.tsx file. For detailed instructions on how to do this, you can refer to Next.js documentation. Another option is to add the sty ...

cssreactjsnext.jsfullcalendar

Adjusting the size of the iframe to match the dimensions of the window

Is there a way to make the iframe automatically fill up the entire space? For example, only opens the iframe up to half of the window in Mozilla Firefox and IE6. How can I ensure that it takes the maximum size of the screen? Are there any CSS or JavaScr ...

javascriptcssiframesize

What is the reason behind Object.hasOwn(x,y) being different from Reflect.ownKeys(x).includes(y) when x represents a CSSStyleDeclaration object and y is a hyphenated property such as 'z-index'?

Both of these conditions are true: 'z-index' in getComputedStyle(document.body) // true Reflect.has(getComputedStyle(document.body), 'z-index') // true Additionally, the following statements also evaluate to true, indicating that &apo ...

javascriptcss

Is the MDL drawer not reaching the full height of the page?

I am currently utilizing Material Design Lite to incorporate a fixed header and drawer into my Ruby on Rails application. In the following video, you can observe that when I switch to another page, the drawer menu on the left side of the page fails to fill ...

htmlcssruby-on-railsmaterial-design

Error: The term "Particles" has not been defined

I'm attempting to integrate code from a website into my project, but encountered an error when the particles failed to run after adding it. I downloaded and installed particle.js from "https://github.com/marcbruederlin/particles.js/issues" for this pu ...

javascripthtmlcssparticlesparticles.js

What is the method for aligning a glyph vertically?

Can anyone help with aligning the glyph vertically to the text? Currently, it seems more like it's attached to the bottom. Here is an example: <a href="#">Zoom</a> a { font-family: 'Open Sans', sans-serif; font-weight: ...

htmlcssalignmentglyph

The colors of my SVG button remain constant and do not dynamically change when I hover over it

I am facing an issue with a button that contains an SVG element. In my CSS, I have defined styles to change the color of the icon and the SVG when hovered over. However, I noticed that I have to directly hover over the SVG itself for the color to fill. As ...

htmlcsssvgbuttonhover

Round progress indicator with directional pointer

I've been working on creating a round progress bar that features an arrow at the front. This is my current progress: HTML Code: <!-- Container --> <ul class="progress"> <!-- Item --> <li data-name="Item 1& ...

htmlcsssvg

Sliding Image Menu using jQuery

I am struggling with creating a menu using jquery mouseenter / mouseout effects. My goal is to have a small icon displayed that expands to the left and reveals the menu link when a user hovers over it. The issue I am facing is that the effect only works w ...

javascriptjqueryhtmlcss

The element fails to appear on screen when using Firefox

Check out this site using IE or Chrome and pay attention to the yellow block: Then, try opening the same page in Firefox and watch as the block mysteriously vanishes. Does anyone have any idea why this is happening? Did I make a mistake somewhere? ...

htmlcssfirefox

How can I adjust the border width of outlined buttons in material-ui?

Currently, I am in the process of modifying a user interface that utilizes Material-UI components. The task at hand involves increasing the thickness of the borders on certain outlined buttons. Is there a method through component props, themes, or styles t ...

javascriptreactjsmaterial-ui

Changing class from 'current-menu-item' to 'active' for filtering

I'm currently developing a unique theme inspired by the Roots Theme, which now incorporates Twitter Bootstrap as its framework. One challenge I encountered is that it utilizes a custom 'walker' for navigation, making it difficult to simply ...

phpcsswordpresstwitter-bootstrapwordpress-theming

Animate the CSS when the content is within the viewport using pagepiling.js integration

I'm currently working on animating content as it enters the viewport. However, I've encountered an issue where jQuery (used to check if the content is in the viewport) isn't functioning properly alongside pagepiling.js (). I suspect this mig ...

javascripthtmlcssanimate.csspagepiling.js