Add "focusVisibleClassName" globally in Material UI

user_10685226 0
Viewed 521

I want to disable the ripple effect since I don't want the effect when clicking on elements. Now this works but when doing this the :focus-visible state will also be disabled which is a bummer. Would be really nice to split this prop up into something like disableClickRipple, disableFocusRipple and so on...

Anyway, according to the docs I have to add focusVisibleClassName in order to style my own focus state but how would I do this to all elements that is affected by the disabled ripple effect? As I understand it I have to do this manually on each and every component? Can this be done globally? To me this would need to be a global setting?

material-ui
1 Answers

I don't know if this is how MUI intended it to be, but this works:

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  props: {
    MuiButtonBase: {
      // Disable ripple globally.
      disableRipple: true,
      // The class will be added (as is, ie `focus-visible`)
      // To the ButtonBase root whenever the button gets focus via keyboard.
      focusVisibleClassName: 'focus-visible',
    },
  },
  overrides: {
    MuiButtonBase: {
      // And this is how we select it.
      root: {
       '&.focus-visible': {
          backgroundColor: 'rgba(0, 0, 0, 0.12)', // theme.pallate.action.focus
        },
      },
    },
  },
});

export default theme;

PS. Spent an hour trying to solve this to no avail. Then I landed your question and "in order to style my own focus state" gave me the idea above.

user_11793770
Related