Tips for removing the default hover and click effects from a Material-UI CardActionArea

Check out the card sample with a lizard photo on https://material-ui.com/components/cards. When you hover over the cardActionArea, it will get darker or lighter based on the theme. Clicking on the card will make the picture change its brightness relative to the mouse pointer. Now I have two questions: 1- How can I customize the click effect color? For example, I want the photo to turn red (change hue) when clicked by the user. 2- I've added my own hover effect that slightly lifts the card when hovered (see codes below). How do I disable the default hover effect that alters the picture's color?

const useStyles = makeStyles({
    root: {
        width: 345,
        margin: 5,
        '&:hover': {
            transform: 'translateY(-5px) !important'
        },
    },
    media: {
        maxHeight: 350,
        marginBottom:-3
    },
});
javascriptcssreactjsmaterial-ui

Answer №1

If you want to prevent default hover effects and disable onClick events, you can achieve this by disabling pointer-events:

const customStyles = makeStyles({
    main: {
        width: 345,
        margin: 5,
        '&:hover': {
            pointerEvents: 'none',
            transform: 'translateY(-5px) !important'
        },
    },
    imageContainer: {
        maxHeight: 350,
        marginBottom:-3
    },
});

Answer №2

const {
  Box,
  ButtonGroup,
  Container,
  Typography,
  makeStyles
} = MaterialDesign;

const useStyles = makeStyles((theme) => ({
  main: {
    maxWidth: 345,
    transition: theme.transitions.create("transform", {
      easing: theme.transitions.easing.easeInOut,
      duration: theme.transitions.duration.standard
    }),
    "&:hover": {
      transform: "translateY(-5px)"
    }
  },
  focusStyle: {
    "&&&": {
      opacity: 0
    }
  },
  rippleEffect: {
    color: "blue"
  }
}));

function DisplayCard() {
  const classes = useStyles();

  return (
    <Box className={classes.main}>
      <ButtonGroup
        classes={{ focusStyle: classes.focus }}
        RippleProps={{ className: classes.rippleEffect }}
      >
        <Container>
          <Typography variant="h6" component="h2">
            Example Card
          </Typography>
          <Typography variant="body1" color="textSecondary" component="p">
            This is just a sample card for demonstration purposes
          </Typography>
        </Container>
      </ButtonGroup>
    </Box>
  );
}

ReactDOM.render(<DisplayCard />, document.getElementById('main'))
<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-design/core@latest/umd/material-design.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<div id="main"></div>

Answer №3

How to remove the default hover and click effects of material-ui CardActionArea

One way to disable the default hover and click effects from CardActionArea is by creating a styled component:

const styledcardactionarea = styled(CardActionArea)(({theme}) => `
    .muicardactionarea-focushighlight {
        background: transparent;
    }
`);

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

I am having trouble running 'yarn install' on my project as it keeps giving me an error saying it cannot locate the binary 'react-script start

Here is my package.json This is the error I am encountering I'm facing issues with all my scripts as they keep throwing the same error consistently. I've tried cloning the repository in a new location and reinstalling the dependencies, but unfor ...

reactjsfirebasevisual-studio-codeyarn-lock.json

Tips for Formatting Your Schema Correctly

Currently, I am working with nextjs and trying to display the Schema inside the head tag. However, when I do so, it displays &quot;:&quot; instead of my intended content. This is the schema code snippet: const Schema = (url,image) => ( < ...

javascriptnext.js

Passing Data Between Page and Component (NEXT.JS + LEAFLET Integration)

I have recently started using Next.js with Leaflet maps and have encountered a beginner's question. I created a page in Next.js ( /pages/map/[id].jsx ) that utilizes a component ( /component/Map.jsx ). Within the page ( [id].jsx ), I fetch a JSON fil ...

javascriptnext.jsleaflet

Switching on the click functionality

I was able to successfully toggle a boolean variable along with some other options. However, I encountered an issue when trying to create another click function for a different button to set the boolean variable to false. Here is my code: let manageme ...

javascripthtml

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

Facing a challenge with displaying an angularjs template within a popover

I am having trouble displaying custom HTML content in a popover when clicking on my "View" link. Although other content is rendering correctly, such as one with an ng-repeat inside it, my custom directive does not seem to be processed and displayed properl ...

javascriptangularjsangularjs-directiveangular-ui-bootstrap

Retrieve the value of the chosen option from a dropdown menu that adjusts dynamically within

I have a query that involves dynamically adding rows to a table for data insertion. A particular <td> element houses a dropdown menu, and I need to extract the selected value from this dropdown in order to make an AJAX call back to a PHP script that ...

javascriptjqueryajax

Using index value as parameter in append function within angular js

I attempted to develop a chat box in Angular, and although I was able to create it, something feels wrong. When I click on the members, it displays a different member than expected. Could someone please review my code? Here is the link to the Plunker: &l ...

javascriptangularjsangularjs-directive

Vue app: ESLint throwing error for undefined global variable in component during npm run serve

In my main.js file, I am initializing a new Vue instance on the window object: window.todoEventBus = new Vue() Within my components, I am attempting to access this global todoEventBus object like so: created() { todoEventBus.$on('pluralise&apos ...

javascriptvue.jsnpmeslint

When combining Puppeteer with Electron, an error stating "Browser revision not found" may occur. However, this issue does not arise when running with Node

My attempts to make Puppeteer work in Electron have been with various versions of Puppeteer (v5.4.0, v5.4.1, and v5.5.0), on Windows 10/MacOS, and with different Node versions (v12, v14.0.1, v15.0.3). Trying a simple puppeteer.launch() in the main process ...

javascriptnode.jselectronpuppeteer

Is it possible for three.js to integrate information from REST APIs?

Currently, I am in the process of learning three.js and have successfully created basic 3D models using hardcoded values. My goal now is to retrieve these values from a database that I have set up in MSSQL Server. These x, y, and z parameters are stored ...

node.jsreactjsspring-bootrestthree.js

Having trouble retrieving the table value from an HTML document?

I am trying to retrieve specific information from this source: This information is crucial for fetching data from a database using a primary key. However, extracting this value has proven to be quite challenging. Upon document readiness, I execute the fol ...

javascriptjquery

error: cannot locate firebase object

I'm currently working on building a chat application using React and Firebase. However, upon adding the Firebase database, I encountered an error. Firebase Storage: Object 'mandy' does not exist. (storage/object-not-found) FirebaseError: Fi ...

reactjsfirebasefirebase-storage

You may encounter an error in React where e.target.value is not defined when

const validationSchema = yup.object({ password: yup .string('Enter your password') .min(8, 'Password should be at least 8 characters long') .required('Password is required'), }); const formik = useFormik({ ...

reactjsformsnext.jsformik

Passing data from child to parent in Angular using EventEmitter

I have integrated a child grid component into my Angular application's parent component, and I am facing an issue with emitting data from the child to the parent. Despite using event emitter to transmit the value to the parent, the variable containing ...

javascriptangulareventemitter

What is the connection between tsconfig.json and typings.json files?

I recently acquired a .NET MVC sample application that came with Angular2-final. Within the project, I noticed a typings.json file at the root and a tsconfig.json file in the ng2 app directory. What is the connection between these two files? Is this the mo ...

javascript.nettypescripttypescript-typingstsconfig

Testing form submission in React with React Testing Library and checking if prop is called

Feel free to check out the issue in action using this codesandbox link: https://codesandbox.io/s/l5835jo1rm To illustrate, I've created a component that fetches a random image every time a button is clicked within the form: import { Button } from " ...

javascriptreactjsunit-testingjestjsreact-testing-library

Guide to removing selected value from a combobox in Angular

I am working on a simple HTML file that consists of one combobox and one clear button. I want the clear button to remove the selected value from the combobox when clicked. Below is my code: mat-card-content fxLayout="row wrap" fxLayoutAlign="left" fxLayou ...

javascripthtmlangulartypescript

Is there a way to customize Firefox's default styles similar to Chrome's?

Can you change the default styles of Firefox to match those of Chrome? ...

htmlcssgoogle-chromefirefox

When it comes to utilizing jQuery for the mobile view, how many jQuery libraries are recommended for optimal performance?

I'm currently constructing a website using ROR, and for the mobile view, I've implemented the mobile_fu gem. The designer provided me with a design for the mobile view that includes various jQuery sliders, players, image sliders, drop-down menus ...

javascriptjqueryjquery-mobilejquery-plugins