Is there a way to turn off the ripple effect on Material UI Input components?

Is there a way to turn off the ripple effect or highlight color on the TextField component in React's Material UI?

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

I've attempted to modify the theme:

theme.props.MuiTab.disableRipple = true

theme.props.MuiButton.disableRipple = true

theme.props.MuiButtonBase.disableRipple = true

and also tried using custom CSS:

// disable Ripple Effect
.MuiTouchRipple-root {
display: none;
}

// disable FocusHighlight
.MuiCardActionArea-focusHighlight {
display: none;
}

After referring to suggestions from this issue: https://github.com/mui-org/material-ui/issues/240

Would appreciate guidance on how to eliminate the ripple effect when an input is focused?

cssreactjsmaterial-ui

Answer №1

After trying various solutions, I found one that finally worked for me.

underline: {
  "&:before": {
    borderBottom: `2px solid var(--border)`,
  },
  "&:after": {
    borderBottom: `2px solid var(--border)`,
    transition: 'none',
  },
  "&:hover:not($disabled):not($focused):not($error):before": {
    borderBottom: `2px solid var(--border)`,
  },
}

Answer №2

Discovered a workaround using the withStyles method:

const StyledTextField = withStyles({
  // Customizing default CSS for input
  root: {
    '& .MuiInput-underline': {
      // Eliminate ripple effect on input
      '&:after': {
        borderBottom: 'initial',
      },
    },
  },
})(TextField);

...

// Example of how to use it
<StyledTextField />

Check out this Codesandbox to compare different solutions using Button and TextField:

https://codesandbox.io/s/material-demo-femi2?fontsize=14&hidenavigation=1&theme=dark

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

Utilizing the CSS Flex property to position one element in the center and align the other element to either the left or right side

What is the best approach to center one element inside a container with CSS flex properties and align another element to the left or right? Even when I set ChatGPT's recommendations of margin-left and margin-right properties to auto for the right-ali ...

htmlcss

Steps for building a Bootstrap grid of thumbnails

I need to display an unknown number of thumbs. Below is a sample of the HTML rendered: <div class="row-fluid"> <ul class="thumbnails"> <li class="span3"> <a href="#" class="thumbnail"> &l ...

javascriptcsslayouttwitter-bootstrapweb

Difficulty encountered with changing font color on CSS

I'm having trouble fixing the text color, it's currently white and blending in with the background. I've set the color to #1a6eb6 for both the TEXT element and the submenu list items, but it's not working. Can someone assist me with thi ...

htmlcsscss3pie

Examining website design on an IOS device from a Windows computer

Is there a way for me to test HTML files from Windows on iOS8 (Local Files)? I have tried Adobe Edge Inspect, but it only works with servers. Are there any free cloud hosts that allow for HTML, CSS, and JS files? Edit: I apologize if my question was not c ...

htmlioscsscloud

Bring life to the process of adding and removing DOM elements through animation

I am seeking to provide an engaging and interactive experience for my users while ensuring responsiveness. To achieve this goal, I have decided to learn more about web development by creating a card game. My current setup involves clickable elements that ...

javascriptjqueryhtmlcssanimation

Responsive Font Sizing in React Native

Does React Native automatically adjust font size based on screen size? If I set the fontSize to 10 for a Text component, will it resize according to different phone sizes? If not, what is the best way to make fonts responsive in React Native? ...

cssreact-nativeresponsive-design

What is preventing me from including an additional parameter in a function in TypeScript?

I am currently developing a task management application. I am facing an issue while attempting to incorporate the event and items.id into a button function for actions like delete, edit, or mark as completed. While this functionality works smoothly in pla ...

reactjstypescriptnext.js

Utilize the ESLint plugin to manage unresolved import paths in Next.js modules

Utilizing module import from next and attempting to import a component as shown below: import Navbar from '@/components/Navbar/Navbar'; Upon running npm run lint, an error is returned stating: 1:20 Error: Unable to resolve path to module &apo ...

javascriptreactjsnext.jseslint

Top tips for deploying a React application and an API on the Heroku platform

Currently, I am engaged in a project utilizing React (via create-react-app) and JSONServer for the API. The structure of my single Git repository is as follows: |-- client |-- api To work in a development environment, I initiate both folders with npm sta ...

node.jsreactjsherokuaxiosjson-server

What is the best way to conceal an element so that it only becomes visible when a user begins to input text

Hey there! I'm in the process of adding a search feature to my Jekyll site, and I've opted to use Simple-Jekyll-Search, which you can check out here: Link. Take a peek at what's inside my search.html: <input type="text" id="my-search-in ...

htmlcssbootstrap-4jekyll

TypeScript perplexed Babel with its unfamiliar syntax and could not compile it

Encountered a problem while attempting to compile typescript. It appears that babel was unable to comprehend the "?." syntax on the line node.current?.contains(event.target) export function useOnClickOutside(node: any, handler: any) { const handlerRef = ...

reactjstypescript

the live binding feature fails to function properly once an append operation is executed

Could someone please explain to me why adding an even number of squares causes the bind event to stop working? $("#add").click(function(){ $("#container").append("<div class=\"square\">xxxxxx</div> ").bind("click",function(e) { ...

jqueryhtmlcss

Is it possible for a search box selection toggle to reveal a hidden information box underneath it containing all the compiled data?

Improve the user experience on my website by implementing a search feature for US states and Canadian territories. When visitors type in their selection, I want them to be able to click on an icon that will reveal relevant information about that choice. T ...

javascripthtmlcss

Updating the active color for Material UI Input elements

I'm having trouble changing the color of an active input field. I want to customize it with my theme's primary color, but I can't figure out how to do it. I've tried adjusting the color attribute in various components like FormControl, ...

javascriptreactjsmaterial-designmaterial-ui

What methods are available to create distinctive, shareable links akin to those utilized by Zoom and Google Hangouts?

I'm currently developing a group video chat app and I'm facing the challenge of generating distinct shareable links for every chat room created. Can anyone guide me on how to accomplish this? My aim is for users to easily join the chat room when ...

javascripthtmlcssnode.jsagora.io

"Conducting API calls in NextJS: Why is Axios/Fetch returning incorrect results when using the post

I'm trying to use a post method on an API, but for some reason when I call the function it posts to the wrong path of the API. Here is the script I am using for the post: //Creating Order const createOrder = async (data) => { try { co ...

javascriptreactjsapinext.js

What steps can I take to incorporate a dropdown feature into my existing menu design?

I am currently working on a navigation menu that includes various subjects. One of the subjects is titled Equipment, and when I hover over it, Throwables and Gear appear. However, I now want to add another dropdown menu that opens when I hover over Throwab ...

htmlcssuinavigationbar

What is preventing me from filling my array with the URL inputted by the user?

I am looking to dynamically populate an array with URLs and display them one by one as users upload files. The goal is for each user to upload a file, have it stored in the array, and then displayed on the page. Specifically, I want to generate <img/&g ...

javascriptreactjsdebugging

Best practices for implementing useDispatch and bindActionCreators in your project?

I have a question about the placement of certain methods. When using Redux store in multiple components, I find myself repeating the same import process: import { useSelector, useDispatch } from "react-redux"; import { bindActionCreators } from & ...

reactjsreduxreact-reduxredux-thunk

Generating HTML tables with charts using FireFox

I am encountering an issue: My table contains charts and tables that are displayed correctly in browsers. However, when I attempt to print it (as a PDF) in Mozilla Firefox, the third speedometer gets cut off, showing only 2.5 speedometers. Using the "s ...

javascripthtmlcssfirefoxhighcharts