[joy-ui] Custom style gets overridden because of CSS specificity

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live

Current behavior 😯

the custom style of :hover and :active is overridden by the selector :

.css-xgj7wg-JoyListItemButton-root:not(.Mui-selected, [aria-selected="true"]):active{
        ....
}
// and 
.css-xgj7wg-JoyListItemButton-root:not(.Mui-selected, [aria-selected="true"]):hover{
       ....
}

Joy UI decided to apply its default style instead of the custom style I had applied.

Expected behavior 🤔

apply custom style :

"&:hover": {
						boxShadow: theme.shadow.lg,
						// change opacity of primary color
						backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.1	)`,
						transform: "translateY(-3px)",
					},
					"&:active": {
						boxShadow: theme.shadow.md,
						transform: "translateY(0px)",
						"--joy-shadowRing": "0 0 #000",
					},

Context 🔦

I want to change the style of hover and active state for the JoyListItemButton Component

Your environment 🌎

System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 18.17.1 - E:\Apps\scoop\persist\nvm\nodejs\nodejs\node.EXE
    Yarn: 1.22.19 - E:\Apps\scoop\persist\nvm\nodejs\nodejs\yarn.CMD
    npm: 10.1.0 - E:\Apps\scoop\persist\nvm\nodejs\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (18.2.0), Chromium (18.2.0), ChromiumDev (18.2.0)
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.22
    @mui/core-downloads-tracker:  5.14.16
    @mui/icons-material: ^5.14.16 => 5.14.16
    @mui/joy: ^5.0.0-beta.13 => 5.0.0-beta.13
    @mui/material:  5.14.16
    @mui/private-theming:  5.14.16
    @mui/styled-engine:  5.14.16
    @mui/system:  5.14.16
    @mui/types:  7.2.8
    @mui/utils:  5.14.16
    @types/react: ^18.2.15 => 18.2.35
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript:  3.9.10