Skip to content
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

Closed
2 tasks done
Heet-Bhalodiya opened this issue Sep 30, 2023 · 11 comments · Fixed by #39319
Closed
2 tasks done
Assignees
Labels
bug 🐛 Something doesn't work component: checkbox This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material

Comments

@Heet-Bhalodiya
Copy link

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the 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 aka extendTheme:
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 using extendTheme 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 the createTheme.the

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo
 System:
    OS: macOS 13.2.1
  Binaries:
    Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.17.1/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm
  Browsers:
    Chrome: 116.0.5845.187
    Edge: Not Found
    Safari: 16.3
  npmPackages:
    @emotion/react: ^11.10.8 => 11.10.8 
    @emotion/styled: ^11.10.8 => 11.10.8 
    @mui/base:  5.0.0-alpha.127 
    @mui/core-downloads-tracker:  5.12.2 
    @mui/lab: ^5.0.0-alpha.128 => 5.0.0-alpha.128 
    @mui/material: ^5.12.2 => 5.12.2 
    @mui/private-theming:  5.12.0 
    @mui/styled-engine:  5.12.0 
    @mui/system: ^5.12.1 => 5.12.1 
    @mui/types:  7.2.4 
    @mui/utils:  5.12.0 
    @mui/x-data-grid: 6.0.3 => 6.0.3 
    @types/react: ^18.2.0 => 18.2.0 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^5.0.4 => 5.0.4 
@Heet-Bhalodiya Heet-Bhalodiya added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Sep 30, 2023
@SakshiShreya
Copy link

Hey, I want to work on this. Please assign it to me.

@whynesspower
Copy link

image
I am sorry but I can't really understand whats the issue here?
The checkbox components don't change background colors when hovered?

Are you sure you are using mouse as an input device and not some stylus?
Regards

@danilo-leal danilo-leal added component: checkbox This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material labels Oct 1, 2023
@amisha-adwani
Copy link

amisha-adwani commented Oct 1, 2023

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 createTheme. However when theme is created using extendTheme (CodeSandbox example), the above stated thing is missing.

I think this is because we are using createTheme and extendTheme interchangeably. We might solve this issue by defining extendTheme.

@whynesspower
Copy link

@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?
image


@SyedAbuBakerAli
Copy link

SyedAbuBakerAli commented Oct 1, 2023

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.

Screenshot 2023-10-01 215810

@adityav477
Copy link

@brijeshb42
Copy link
Contributor

brijeshb42 commented Oct 2, 2023

@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 mainChannel token which is not available in the default theme. So we'll have to either use main token or define mainChannel token as well while creating themes.
Let me know what you think and then we can reassign it to folks who want to contribute here.

Till this is fixed, @Heet-Bhalodiya, you can use the work-around as solved by @SyedAbuBakerAli here.

@SyedAbuBakerAli
Copy link

Hey! @brijeshb42 can you please guide how I contribute in this project. I'm new in open source.

@tejodeepmitraroy
Copy link

I want to contribute

@brijeshb42
Copy link
Contributor

Let's first wait for Danilo's input on a probable solution.

@siriwatknp siriwatknp added bug 🐛 Something doesn't work and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Oct 5, 2023
@siriwatknp
Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: checkbox This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material
Projects
None yet
Development

Successfully merging a pull request may close this issue.

10 participants