-
-
Notifications
You must be signed in to change notification settings - Fork 31.7k
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鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Fab] Hover CSS styles mix up with disabled styles on tap on mobile #35039
Labels
bug 馃悰
Something doesn't work
component: Fab
The React component.
package: material-ui
Specific to @mui/material
Comments
Uzwername
added
the
status: waiting for maintainer
These issues haven't been looked at yet by a maintainer
label
Nov 7, 2022
IRL I've fixed this by passing the following as import { fabClasses } from '@mui/material/Fab';
import type { Theme } from '@mui/material';
// ...
export const NAV_FAB = (theme: Theme) => ({
[`&.${fabClasses.disabled}, &.${fabClasses.disabled}:hover, &.${fabClasses.disabled}:focus`]: {
backgroundColor: theme.palette.action.disabledBackground,
},
}); I'd be glad to open a PR to fix it |
Just following up: is this going to be addressed? |
michaldudak
added
component: Fab
The React component.
package: material-ui
Specific to @mui/material
and removed
package: system
Specific to @mui/system
labels
Nov 28, 2022
Moving the disabled styles to the very bottom should do the trick without increasing specificity: @@ -76,11 +76,6 @@ const FabRoot = styled(ButtonBase, {
[`&.${fabClasses.focusVisible}`]: {
boxShadow: (theme.vars || theme).shadows[6],
},
- [`&.${fabClasses.disabled}`]: {
- color: (theme.vars || theme).palette.action.disabled,
- boxShadow: (theme.vars || theme).shadows[0],
- backgroundColor: (theme.vars || theme).palette.action.disabledBackground,
- },
...(ownerState.size === 'small' && {
width: 40,
height: 40,
@@ -132,6 +127,13 @@ const FabRoot = styled(ButtonBase, {
},
}),
}),
+ ({ theme }) => ({
+ [`&.${fabClasses.disabled}`]: {
+ color: (theme.vars || theme).palette.action.disabled,
+ boxShadow: (theme.vars || theme).shadows[0],
+ backgroundColor: (theme.vars || theme).palette.action.disabledBackground,
+ },
+ }),
);
const Fab = React.forwardRef(function Fab(inProps, ref) { Would you like to create a PR? |
michaldudak
added
bug 馃悰
Something doesn't work
and removed
status: waiting for maintainer
These issues haven't been looked at yet by a maintainer
labels
Nov 28, 2022
@michaldudak Sure thing, I'll submit it soon |
I'm going to submit a PR no later than tomorrow night (UTC) |
1 task
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: Fab
The React component.
package: material-ui
Specific to @mui/material
Duplicates
Latest version
Steps to reproduce 馃暪
Link to live example: https://yrh2tw.csb.app/
Steps:
@mui/material/Fab
Fab
Fab
Current behavior 馃槸
React.App.webm
Expected behavior 馃
Disabled styles must take precedence, the
Fab
must look disabled (have the corresponding background, etc.).Context 馃敠
Initially, I found this bug while using
Fab
as a navigation button inside a multistep form (which isn't its main use case, obviously).Your environment 馃寧
npx @mui/envinfo
Reproducible with codesandbox
The text was updated successfully, but these errors were encountered: