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

Question

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`,
},

css material-ui jss

Answer 1

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

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 3

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 4

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 5

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 6

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 7

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 8

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 9

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

Answer 10

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

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

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the best way to adjust image size based on different screen sizes while ensuring the buttons at the top remain responsive

Managing images in JavaScript while conserving memory

Material-UI is experiencing too many re-renders, resulting in an unstable layout. The TextareaAutosize feature has been implemented to restrict the number of renders and avoid triggering an

Display a new component when the button is clicked within the current component while completely hiding the previous component

I receive an [object HTMLCollection] as the output

Accessing elements within a ReactJS map structure using the material-ui Selectable List component is not supported

Using jQuery, learn how to successfully call a selector from dynamic content

Tips for positioning text on the left and right sides of a div in HTML styling

excess margin running along the left side of each page

Adding margin padding to a Material UI Navbar: Step-by-step guide

Animating or transitioning CSS keyframes to an inline value when the page is initially loaded

Issue with CSS causing dropdown to open underneath modal

Pause jQuery at the conclusion and head back to the beginning

Tips for Keeping a Responsive Image at the Forefront of a Text-Image Layout as You Scroll

Tips for aligning an image and paragraph in the center of a table row using Material UI

Ensure that the Footer spans the entire width of the screen by using a container with fluid width, while

What is the method to customize the color of the Stepper component in React Material UI?

The Angular Date Picker stubbornly refuses to show dates in the format of DD/MM

Having trouble viewing the CSS menu on Internet Explorer 8? Could it be a potential JavaScript issue causing the problem?

Particular arrangement of a table