Tips for eliminating the default hover and active states from a textfield in Material UI

Currently, I am in the process of creating a login form and have incorporated Material UI textfields. However, I am facing an issue where the textfield's default hover and active states cannot be removed.

Below is my password textfield: (https://i.stack.imgur.com/pSiXt.png)]

With hover: (https://i.stack.imgur.com/NhqQO.png)]

Active: (https://i.stack.imgur.com/fir8E.png)]

I have attempted the following solutions:

'& .MuiInput-underline:hover:before':
{
    border: 'none !important'
},

'&:hover fieldset': {
      borderColor: 'grey',
    },

'& .MuiInput-underline:hover:before':
{
    border: 'none !important'
},

All I need is to remove the hover and active effects from the textfields.

cssreactjsmaterial-ui

Answer №1

If you want to style your components using makeStyles, here is an example:

import { makeStyles } from '@material-ui/core/styles';

const customStyles = makeStyles({
  main: {
    '& .MuiInput-underline:before': {
      border: 'none',
    },
    '&:hover .MuiInput-underline:before': {
      border: 'none',
    },
    '& .MuiInput-underline:after': {
      border: 'none',
    },
  },
});

export default function CustomForm() {
  const styles = customStyles();

  return (
      <TextField
        className={styles.main}
        label="Password"
        type="password"
      />
  );
}

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 state will remain unchanged until there is an external trigger

Currently, I am utilizing useEffect in order to execute a function that retrieves data from Firebase. Even though the data retrieval works fine, there seems to be an issue with the setState function not updating until after another state has been changed. ...

reactjsfirebasegoogle-cloud-firestorereact-hooks

What could be causing Next.js middleware to run repeatedly?

Recently, I set up a brand new Next.js project using npx create-next-app@latest --typescript. Upon completing the installation (version 13.3.4), without making any modifications to existing files, I introduced a new file named middleware.ts within the src ...

javascriptreactjsnext.js

Implementing Materialize CSS functionality for deleting chips

I've been attempting to extract the tag of a deleted chip from the div within the Materialize chips class, but I'm hitting roadblocks. My failed attempts so far: $('.chips').on('chip.delete', function(e, chip){ console.lo ...

javascriptjqueryhtmlcssmaterialize

The module cannot be located due to an error: Package path ./dist/style.css is not being exported from the package

I am facing an issue with importing CSS from a public library built with Vite. When I try to import the CSS using: import 'rd-component/dist/style.css'; I encounter an error during the project build process: ERROR in ./src/page/photo/gen/GenPhot ...

cssreactjstypescriptvite

Customize the color of the horizontal line in React using dynamic properties

Is there a way to customize the color of an <hr /> element in a React application? If we were to use a functional component to accomplish this, how would we go about it? ...

htmlcssreactjs

Tips for monitoring input content "live"

Currently, I am in the process of developing a web form that includes a text field intended to receive numeric values. If the user enters non-numeric characters into this field, the form will not submit. However, there is no error message displayed to noti ...

javascriptjqueryhtmlcss

Harnessing the power of closures to encapsulate state within React components

When trying to pass data between distant elements in the component hierarchy, relying on props can be cumbersome. In situations like these, I have turned to Redux as a solution because it simplifies tracking data when dealing with numerous components. In ...

reactjs

What steps can be taken to ensure that when one <ListItem> component expands within a <List> component in React Material UI, all other <ListItem> components remain collapsible?

Our current application is utilizing the react material ui components for web page design. In a specific scenario, we are using the <List> material ui component, with some modifications based on our application's needs, as recommended in https:/ ...

reactjsmaterial-ui

The React data editor Dialog closes when the drop-down is clicked without triggering any onChange events

Utilizing the react-datasheet component, I have implemented a table to display a matrix/grid of data. To enhance user experience, I customized the dataEditor to launch a custom dialog where users can only choose from preselected values in a material-ui dro ...

javascriptreactjsmaterial-ui

What could be causing my mdx files to not display basic markdown elements such as lists and headings? (Next.js, mdx-bundler)

Trying to implement Kent C Dodds mdx-bundler with the Next.js typescript blog starter example is proving challenging. While it successfully renders JSX and certain markdown elements, basic markdown syntax like lists and paragraph spacing seem to be malfunc ...

reactjstypescriptnext.jsmarkdown

When using the background-blend-mode property, transition-duration is not taken into account

Try hovering over the top left h1 element in this code example You'll notice that it smoothly changes the h1 element to a shade of blue in just 2 seconds. However, the transition doesn't affect the blend mode of the backgrounds. Even though the ...

css

Styling a table in CSS to have top and bottom borders

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> li { display:inline; list-style-type:none; padding-left:1em; margin-left:1em; border-left:1 ...

htmlcss

A method for positioning each pair of <li> elements side by side

My goal is to arrange every pair of li elements next to each other (e.g. 0-9, A-B, C-D, ...). Currently, they are aligned one by one. <ul> <li class="alphabetRow"><a href="#" id="alpha_1" class="alphabet active" >0-9</a></li ...

htmlcss

Ways to customize the default CSS styles of angularJS for elements like search box and more

Looking for a way to customize the appearance of an AngularJs search box? <div ng-controller="PersonListCtrl"> <div class="bar">Search: <input ng-model="query"> </div> <ul cl ...

cssangularjs

I am looking to split an array into smaller subarrays, each containing 5 elements, and assign a distinct class to the elements within each subarray. How can I

I have a group of "n" "li" elements that I would like to split into "x" subsets using jQuery. Each subset should contain 5 "li" elements, and I also want to assign a different class to each subset. <ul> <li>text1</li> <li>text2&l ...

javascriptjqueryhtmlcss

Dynamically changing the borders of WebGL canvases: a guide to adding and

Here is my code snippet for creating an HTML canvas: <canvas id="glCanvas" class="canvases" width="20" height="20></canvas> To set the color, I am using the following: gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); I am w ...

javascripthtmlcssborder

Jest and Enzyme failing to trigger `onload` callback for an image

I'm having trouble testing the onload function of an instance of the ImageLoader class component. The ImageLoader works fine, but my tests won't run properly. Here's an example of the class component: export default class ImageLoader extend ...

javascriptreactjsjestjsenzymejsdom

Design a layout featuring an array of boxes in varied sizes

Is it possible to create a grid layout with 3 columns containing div boxes of varying heights, all populated with content extracted from a database? ...

htmlcss

Unable to alter or eliminate the grey background using material-ui

Struggling with a React application that incorporates material-ui. Despite my efforts, I can't seem to get rid of an unwanted grey background in one section of the app. Attempted solutions: body { background-color: #ffffff !important; } * { b ...

cssreactjsmaterial-ui

The impact of angles on drop shadows in CSS3

Is there a way to replicate the shadow effect seen on the slider at using pure CSS? I've managed to recreate it in Photoshop, but I'm hoping to achieve the same result through CSS for a cleaner solution. ...

css