Increase the border at the bottom while hovering with React.js and the Material UI library

Can someone help me achieve a hover effect similar to the one in this question on Stack Overflow: Hover effect : expand bottom border

I am attempting to create the same effect in React using makeStyles of Material UI. Here is my current code:

const useStyles = makeStyles((theme) => ({
 //other code
  remove: {
    textTransform: "none",
    fontSize: "0.75rem",
    "&:after": {
      transition: theme.transitions.create(["transform"], {
        duration: theme.transitions.duration.standard,
      }),
      transform: "scale(0)",
      borderBottom: "1px solid #dbdada",
      transformOrigin: "0% 50%",
    },
    "&:hover": {
      background: "none",
      "&:after": {
        transform: "scale(1)",
      },
    },
  },

 // other code
}));

This is the component where I am trying to implement the border bottom animation:

<Button
      classes={{root:classes.remove}}
      onClick={() => handleClickRemove(item)}
    >
      Remove
    </Button>
javascriptcssreactjsanimationmaterial-ui

Answer №1

If you want to add animation to the bottom border of a Button in Material-ui, you can achieve this by creating a transition for the border-bottom property. Then, apply the CSS injection to the Button's root class using the classes prop.

Check out a live example here.

In the Button's classes prop, inject the necessary CSS into the root like so:

<Button
    variant="contained"
    classes={{
      root: classes.remove
    }}
  >
    Remove
  </Button>

Then define the styles in your useStyles:

 const useStyles = makeStyles((theme) => ({
 ...
  remove: {
    textTransform: "none",
    fontSize: "0.75rem",
    borderBottom: "2px solid transparent",
    transition: theme.transitions.create(["border-bottom"], {
      duration: 1000
    }),
    "&:hover": {
       textDecoration: "none",
       borderBottom: "2px solid black"
    }
  }
 ...
}));

Keep in mind that when setting up the transition for border-bottom, you have the option to adjust the easing like the duration (by default, the easing is set to easeInOut).

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

What could be causing the triggering of two AJAX requests in the given JavaScript code?

I have a code snippet that fetches data from the server. I want to trigger it on document.ready(). My expectation is that the first request is sent to the server, receives a response, and then the second request is made, and so forth. However, when I insp ...

javascriptjqueryajaxlong-polling

Bidirectional updates in AngularJS with CSS styling

On the backend, certain HTML elements store their position and size persistently and retrieve them when the page loads. These elements can be dragged and resized by users, with any updates needing to be saved on the backend for consistency across sessions. ...

javascriptjquerycssangularjs

The Bootstrap tooltip effectively fades away after displaying text, but it is not positioned correctly above the icon

Having some issues with my tooltip functionality. It seems to display the text on the left side and fades away upon mouseover, but it doesn't show up in a proper tooltip box over the icon as expected. I suspect that there might be a conflict between j ...

javascriptjqueryhtmltwitter-bootstrapsass

Error occurred: "Uncaught TypeError: Cannot access 'main' property of an undefined object while attempting to utilize React MuiAlert"

My goal is to create a Redux-based notificator using the example provided in the following link: https://material-ui.com/components/snackbars/#CustomizedSnackbars.tsx This is what I have come up with so far: import { Snackbar } from '@material-ui/co ...

reactjsreduxmaterial-ui

Unable to Display Embed Request Using Javascript in IE9 and IE10

My website allows users to embed content they create on the site into their own blogs or pages using a series of embeds. Here is the code we provide them: <script src="[EMBED PROXY URL]" type="text/javascript"></script> When this code calls ...

javascriptinternet-exploreriframeinternet-explorer-9internet-explorer-10

How can I select elements in CSS that are "between x and y"?

If I have an HTML table with 20 rows and 3 columns (20x3), I am looking to highlight the rows from 7 to 12 in red. What CSS selector should I use for this specific task? How can I define the range of rows to be styled as "between"? ...

csscss-selectors

Using Angular.js to update the `ng-model` with the value of text.textContent

There is a javascript event that dynamically updates the value of an input var posx = event.target.querySelector('input.posx'); posx.value = event.dx; This code successfully updates the html: <input type="text" ng-model="posx" si ...

javascriptangularjsangular-ngmodel

CSS styling doesn't take effect until the page is reloaded due to the failure of cssText

After generating a new list item, it appears that the CSS styling is not being inherited until the page is reloaded. Even though I have added styling using cssText dynamically, it doesn't seem to be working as expected. I've attempted using cssT ...

javascriptcss

Transforming a PHP cURL call to node.js

Currently exploring the possibility of utilizing the Smmry API, however, it seems that they only provide PHP API connection examples. Is there anyone who could assist me in adapting it into a JS request? My requirement is simple - I just need it to analyz ...

javascriptphpnode.jsapirequest

Is there a way to use JavaScript or jQuery to automatically convert HTML/CSS files into PDF documents?

While using OS X, I noticed that in Chrome I have the option to Save as PDF in the print window by setting the destination to "Save as PDF". Is this feature available on Windows? Is there a way to easily save to PDF with just one click? How can I access t ...

javascriptjqueryhtmlcsspdf

Combine several items to form a single entity

When I have two objects returned from the database, my goal is to combine them into one object. Here are the examples: { "id": 4, "first_name": "s", "last_name": "a", ...

javascriptarraysnode.js

Guide to accessing a particular object key within an array by leveraging the MUI multiple autocomplete feature coupled with the useState hook

How can I retrieve the id key from a selected object in a given array list and set it to the state? You can find a sandbox example at this link: https://codesandbox.io/s/tags-material-demo-forked-ffuvg4?file=/demo.js ...

javascriptreactjsmaterial-ui

Modify the animation on Material UI Autocomplete with an underline effect

In my project, I am utilizing a Material UI Autocomplete component for the "Faculdade" field. Nonetheless, I have observed that the animation/transition effect when this component is focused involves spreading from the middle outwards. I desire the animati ...

cssreactjsanimationautocompletematerial-ui

Integrating Braintree with Angular for accepting Android Pay transactions

Currently facing a challenge with Braintree that I need help resolving. I have successfully set up Braintree to generate my client_token using my API, and created the drop-in feature as a test. Here is how I implemented it: (function () { 'use st ...

javascriptandroidangularjsbraintree

Encountering a TypeScript error in MUI 5 when attempting to spread values in props

I am encountering an issue with a typescript error related to the MUI sx prop. The problem arises when I attempt to merge or spread multiple sx values into an sx prop, resulting in an error. It seems to work fine if only one item is present in the sx prop, ...

typescriptmaterial-ui

Utilizing Mongoose Schema Enums Alongside TypeScript Enums

In our Typescript-based NodeJs project utilizing Mongoose, we are seeking the right approach to define an enum field on a Mongoose schema that aligns with a Typescript enum. To illustrate, consider the following enum: enum StatusType { Approved = 1, ...

javascriptnode.jstypescriptmongodbmongoose

Encountered an error when attempting to load the external module @babel/register during the

My React project runs smoothly on my VMware, but when I cloned the same app and executed the gulp command, I encountered an error during compilation: MacBook-Pro:Frontend1.0 apurvgandhwani$ gulp [18:42:31] Failed to load external module @babel/register ...

node.jsreactjsgulpbabeljsbabel-loader

Simple JavaScript numeric input field

Hey there, I'm a beginner learning JavaScript. I'm currently working on creating a program that adds numbers input through text fields. If you want to check out the HTML code, visit this link on JS Fiddle: http://jsfiddle.net/fCXMt/ My questio ...

javascripthtmlcssmathaddition

Exploring the concept of next middle-ware within the realm of Express.js and Sail.js controllers

Currently, I am utilizing sails.js framework which is constructed on top of express.js. Within my routes.js file, I have defined a route as shown below: '/account/login': { controller : 'Session', action : 'l ...

javascriptnode.jsmodel-view-controllerexpresssails.js

Are you familiar with utilizing social share buttons in NEXTJS?

I have been encountering issues with the social share button in my Next.js project using the package https://www.npmjs.com/package/react-share. The share count for platforms like Facebook, LinkedIn, and Twitter is not displaying properly and I am unable ...

reactjsnext.jsfacebook-social-plugins