-
-
Notifications
You must be signed in to change notification settings - Fork 32.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Checkbox][material-ui] Bg color on hover not working properly while using extendTheme #39230
Comments
Hey, I want to work on this. Please assign it to me. |
Here's a brief explanation for you, @whynesspower, In the CodeSandbox example, when you hover over the buttons, each button creates a background circle around it with a color that matches its respective variant (e.g., green for success, red for error). The theme here is created using I think this is because we are using createTheme and extendTheme interchangeably. We might solve this issue by defining extendTheme. |
@amisha-adwani I am sorry, but I can't see any hovers on the checkbox or the subtitle, can you attach a small demo of it? |
Hey! @Heet-Bhalodiya @danilo-leal @amisha-adwani can you guide me where I have to make change in code base . I'm able to solve in sandcodebox but I didn't know how i make change in project code. |
@danilo-leal I've found that we are hardcoding the color token when theme variables are defined unlike when not defined here. Even if we do not hardcode, we are using the Till this is fixed, @Heet-Bhalodiya, you can use the work-around as solved by @SyedAbuBakerAli here. |
Hey! @brijeshb42 can you please guide how I contribute in this project. I'm new in open source. |
I want to contribute |
Let's first wait for Danilo's input on a probable solution. |
Based on https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Checkbox/Checkbox.js#L58, we can do: diff --git a/packages/mui-material/src/Checkbox/Checkbox.js b/packages/mui-material/src/Checkbox/Checkbox.js
index 993b5ecc3e..a82ecf59f3 100644
--- a/packages/mui-material/src/Checkbox/Checkbox.js
+++ b/packages/mui-material/src/Checkbox/Checkbox.js
@@ -55,7 +55,7 @@ const CheckboxRoot = styled(SwitchBase, {
? `rgba(${
ownerState.color === 'default'
? theme.vars.palette.action.activeChannel
- : theme.vars.palette.primary.mainChannel
+ : theme.vars.palette[ownerState.color]?.mainChannel
} / ${theme.vars.palette.action.hoverOpacity})`
: alpha(
ownerState.color === 'default' I'd consider this issue as a bug. |
Duplicates
Latest version
Steps to reproduce 🕹
Link to live example using
createTheme
:https://codesandbox.io/s/charming-meadow-49wpwr
Link to live example using
experimental_extendTheme
akaextendTheme
:https://codesandbox.io/s/unruffled-robinson-llzdmd?file=/src/App.tsx
Current behavior 😯
When I create a theme using
createTheme
and hover over the default checkbox component, its background color updates to the respective color as it should. However, if I create a theme usingextendTheme
and hover over the default checkbox component, it doesn't render the respective background colors as expected. Instead, it shows the primary bg-color.Expected behavior 🤔
When I implement the
extendTheme
, I expect the background color of the default checkbox component to change to the respective color when hovered, similar to what I observe for checkbox when using thecreateTheme
.theContext 🔦
No response
Your environment 🌎
npx @mui/envinfo
The text was updated successfully, but these errors were encountered: