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

Guide on adding a line break between two inline-block elements

Struggling to find a way to add a line break between two div elements in this fiddle here. The issue is that I want the elements centered and also have control over line breaks. Using float allows for line breaks with: .article:after { content: ' ...

htmlcss

What is the best way to empty a TextField in a React application?

Greetings to all! I could use some help figuring out how to clear a TextField after clicking the icon. Any suggestions would be greatly appreciated. Thanks! const [filteredLocations, setFilteredLocations] = useState(locations); const clearSearch = () =& ...

javascriptreactjsmaterial-ui

Error encountered due to unidentified JSX syntax within div element

**** When I check the terminal, this is what I see **** ./src/card.js Line 9:9: Parsing error: Unterminated JSX contents 7 | <h2>john doe</h2> 8 | <p><a href="/cdn-cgi/l/email-protection" cl ...

javascriptreactjs

Tips for utilizing CSS to position a semi-circle in the middle of an image

Can CSS create a half circle effect on any image? I want to achieve a half circle effect in an image using CSS. Is this possible or not? ...

css

Retrieving data from a URL and iterating through it to add to the state array of a ReactJS component

Recently, I have been diving into learning ReactJS and have faced some challenges in dealing with a component's state. When fetching a URL that returns a JSON file, I aim to set the state of my component based on the values from this file. While it&ap ...

reactjscomponentsthis

An unusual character "" popped up while working with react native on iOS platform

Currently, I am in the process of learning how to use ReactNative for iOS. I have completed all the initial setup steps and am now following a tutorial for basic understanding. React Native However, I have encountered an error during this learning process ...

iosreactjsreact-nativexcode8

Animate your images with a captivating wave effect using SVG animation

I've been working on animations and I have an SVG image that I want to move like a wave continuously. I've tried using GSAP and CSS but still haven't been successful. Can anyone offer any suggestions or help? It would be greatly appreciated. ...

htmlcssgsap

Tips on utilizing React and Node to upload text as a file to Google Drive

Are you wondering how to incorporate React.js as the frontend and Node.js as the backend for uploading/reading files from Google Drive? In my attempts, I've tried writing a string as a text file and then uploading it to Google Drive by following this ...

javascriptnode.jsreactjs

The file or directory does not exist: .. ode_modules.staging@types eact-transition-group-96871f11package.json

I'm facing an issue while attempting to run a React project in VS2013. I followed a tutorial from here and initially, everything seemed to be working fine. However, when I tried to customize the project by adding more packages to the package.json fil ...

node.jsreactjsnpmvisual-studio-2013

The MUI select box stays fixed in its position relative to both the height and width of the viewport while scrolling

Whenever I click on the MUI select, the dropdown box stays fixed in the viewport both horizontally and vertically as I scroll. Ideally, it should move along with the select. Any ideas on how to fix this issue? I attempted adjusting the positioning of the ...

javascriptreactjsselectmaterial-uipositioning

React hooks: Issue with useEffect not triggered when dealing with an array of objects

When demonstrating examples for clarity, I will be removing some functionality. The main issue revolves around a useEffect (shown below) that has a dependency tracking the array of card objects in state.cards. My assumption was that if there is a change in ...

reactjsreact-hooks

Maintain the previous droppable positioning after refreshing the page

I am encountering an issue with the .droppable event. I have set up two sections where I can move elements, but every time the page is refreshed, the positioning of the elements reverts to the initial position. How can I maintain the last positioning of th ...

javascriptjqueryhtmlcssdroppable

Centralized navigation bar

I am currently facing a challenge with centering my nav bar and I'm not sure how to proceed. The nav bar is placed within a class and a div, which is causing confusion for me. I have attempted to align it to the center and also tried using float:cente ...

htmlcss

Display the user's input value in a tooltip without using jQuery

I am looking to achieve this particular layout design. https://i.stack.imgur.com/p9UTH.jpg I am unsure about how to display the input value in the bubble within this layout. The visibility of the bubble should only be triggered on hover. Below is the cod ...

javascripthtmlcss

Reports of missing packages in the React Starter Kit have caused confusion among users

While I may be new to React/JS, I have a wide range of experience in different technologies, including some work with Angular/JS. Therefore, my encounter with the Node/JS ecosystem is not completely fresh. The journey began when I encountered a missing pe ...

node.jsreactjsnpm

Resetting the CSS for an input field: a step-by-step guide

My situation involves having a global CSS style set for text type inputs, such as: input[type=text] { padding:10px; width:100px; //and many more } Now, I am incorporating a plugin called colorpicker into a specific div. This plugin generates some input e ...

javascriptjqueryhtmlcsscss-reset

Create a curve using two distinct colors in JavaScript

I am currently experimenting with a canvas and I have a specific challenge in mind. My goal is to draw an arc using two different colors, where the first half of the arc will be green and the second half red. Check out the code snippet below: // CANVAS co ...

javascriptcsscanvas

"The Material UI upload button appears empty, indicating that no file has been selected

When attempting to incorporate one of the MU upload buttons with ReactJS using the code provided on the official page (4th button, with the icon), I made sure to import all necessary dependencies. The React code for this button is shown below: import { ...

reactjsmaterial-ui

Creating a CSS grid layout with an unspecified number of columns all set to equal width

Currently, I am in the process of designing a navigation bar using grids. In essence, when the user is an admin, there should be two additional links at the end of the bar. These links need to have the same width and should not be affected by the amount of ...

htmlcssvue.jscss-grid

Organizing ReactJS Components: Best Practices for Folder Structure

Is it possible to store the containers-folder outside of the components-folder? Should the common-folder and helpers-folder be kept inside the component-folder instead? What is the recommended arrangement for the following folders within the components-f ...

reactjs