CODEWITHSUNDEEP
javascriptreactjsecmascript-6material-uifrontend
theWanderer
theWanderer

Reputation: 636

How to change color of button in material ui using "&:active":?

i am using material ui in my project. I want to change the active state of my button. i am using active and hover of material ui, i.e

const useStyles = makeStyles((theme) => ({
  button: {
    "&:hover": {
      boxShadow: "none",
      background: "red"
    },
    "&:active": {
      boxShadow: "none",
      background: "black"
    }
  }
}));

but hover is working, but not active. https://codesandbox.io/s/material-demo-forked-zv9vt?file=/demo.js

Upvotes: 1

Views: 5422

Answers (2)

Pakeerthan M
Pakeerthan M

Reputation: 11

button: (active) => {
  return {
   "&:hover": {
     boxShadow: "none",
     background: "red"
   },
   boxShadow: active ? "none" : undefined,// Use your preferer color instead of undefined.
   backgroundColor: active ? "yellow" : undefined, //Use your preferer color instead of undefined.
 };
}

In the proposed solution, you have to use a function that takes an active parameter. If active is true, it applies the styles for the button's hover state (no box shadow and a red background), and it also sets the boxShadow to "none" and backgroundColor to "yellow" specifically for the active state. If active is false, it leaves boxShadow and backgroundColor as undefined, effectively resetting them to their default values.

The key difference between the two approaches is that the your code directly applies styles to the active selector, while the prop-based solution conditionally sets the boxShadow and backgroundColor properties based on the active parameter, allowing you to control the active state styles dynamically. The prop-based solution is more flexible and can be used to change the active state styles programmatically by passing the active parameter when rendering the button. You can see sample of custom button.

<CustomButton active=true/>

Upvotes: 0

NearHuscarl
NearHuscarl

Reputation: 81370

hover style is applied when you are hovering the button.

active style is applied when you are clicking the button, and before you release the mouse button. When you start clicking the button, you change from the hover state to active state.

In your code, hover and active are the same, so you see the same style between the transition. Try changing active state to something different:

button: {
  "&:hover": {
    boxShadow: "none",
    background: "red"
  },
  "&:active": {
    boxShadow: "none",
    background: "yellow"
  }
}

Upvotes: 1

Related Questions