Material-ui: [Buttons] Disable elevation

[MaxLeiter]

I have buttons that I don't want to have a box-shadow. Instead of custom CSS, using the elevation key would be ideal for me, as that's how we handle <Paper /> shadows

[joshwooding]

I’m not sure if this should be in the core library. I guess we should see what other users wants. I would close this in the mean time let’s see what @oliviertassinari thinks :)

[oliviertassinari]

@joshwooding I agree. Personally, I would override the box shadow, or start from the ButtonBase component.

[MaxLeiter]

It just seems kind of 'silly' for paper to accept elevation but nothing else. What sets Paper apart?

[oliviertassinari]

@MaxLeiter The Paper is used to abstract a surface, a surface has an elevation. In the light mode, the surface elevation defines the box shadow, in the dark mode, the elevation defines the box shadow and the background color. I don't think that the Button answer to the same requirements. But waiting for people upvotes sounds like a good tradeoff.

[oliviertassinari]

What about a disableElevation prop?

````diff
diff --git a/packages/material-ui/src/Button/Button.d.ts b/packages/material-ui/src/Button/Button.d.ts
index 77fadc64e..b3b4b1ee4 100644
--- a/packages/material-ui/src/Button/Button.d.ts
+++ b/packages/material-ui/src/Button/Button.d.ts
@@ -8,6 +8,7 @@ export type ButtonTypeMap<

= ExtendButtonBaseTypeMap<{
props: P & {
color?: PropTypes.Color;

• disableElevation?: boolean;
  disableFocusRipple?: boolean;
  endIcon?: React.ReactNode;
  fullWidth?: boolean;
  @@ -39,6 +40,7 @@ export type ButtonClassKey =
  | 'contained'
  | 'containedPrimary'
  | 'containedSecondary'
• | 'disableElevation'
  | 'focusVisible'
  | 'disabled'
  | 'colorInherit'
  diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js
  index bdba5db1f..380389b47 100644
  --- a/packages/material-ui/src/Button/Button.js
  +++ b/packages/material-ui/src/Button/Button.js
  @@ -158,6 +158,25 @@ export const styles = theme => ({
  },
  },
  },
• /* Styles applied to the root element if disableElevation={true}. */
• disableElevation: {
• boxShadow: 'none',
• '&:hover': {
• boxShadow: 'none',
• '@media (hover: none)': {
• boxShadow: 'none',
• },
• },
• '&$focusVisible': {
• boxShadow: 'none',
• },
• '&:active': {
• boxShadow: 'none',
• },
• '&$disabled': {
• boxShadow: 'none',
• },
• },
  /* Pseudo-class applied to the ButtonBase root element if the button is keyboard focused. /
  focusVisible: {},
  / Pseudo-class applied to the root element if disabled={true}. */
  @@ -251,6 +270,7 @@ const Button = React.forwardRef(function Button(props, ref) {
  color = 'default',
  component = 'button',
  disabled = false,
• disableElevation = false,
  disableFocusRipple = false,
  endIcon: endIconProp,
  focusVisibleClassName,
  @@ -282,6 +302,7 @@ const Button = React.forwardRef(function Button(props, ref) {
  [classes[${variant}${capitalize(color)}]]: color !== 'default' && color !== 'inherit',
  [classes[${variant}Size${capitalize(size)}]]: size !== 'medium',
  [classes[size${capitalize(size)}]]: size !== 'medium',
• [classes.disableElevation]: disableElevation,
  [classes.disabled]: disabled,
  [classes.fullWidth]: fullWidth,
  [classes.colorInherit]: color === 'inherit',
  @@ -332,6 +353,10 @@ Button.propTypes = {
  
  
  
  • If true, the button will be disabled.
    
    */
    
    disabled: PropTypes.bool,
  
  
• /**
• 
  
  • If true, no elevation is used.
  
  
• */
• disableElevation: PropTypes.bool,
  /**
  
  
  
  • If true, the keyboard focus ripple will be disabled.
  
  
  • disableRipple must also be true.
    
    ```
  
  

[netochaves]

Can I work on this?

[jawpio]

Guys, is it possible to override it on top level?

I tried following approach but no luck:

let theme = createMuiTheme({
  overrides: {
    MuiButton: {
      disableElevation: {
          boxShadow: 'none',
          '&:hover': {
            boxShadow: 'none',
            '@media (hover: none)': {
              boxShadow: 'none',
            },
          },
          '&$focusVisible': {
            boxShadow: 'none',
          },
          '&:active': {
            boxShadow: 'none',
          },
          '&$disabled': {
            boxShadow: 'none',
          },
      },
      root: {
        borderRadius: 2
      },
....

[oliviertassinari]

@jawpio Simpler:

const theme = createMuiTheme({
  props: {
    MuiButton: {
      disableElevation: true,
    },
  },
});

[negarineh]

@jawpio Simpler:

const theme = createMuiTheme({
  props: {
    MuiButton: {
      disableElevation: true,
    },
  },
});

This just shows an error like in console:

Warning: Material-UI: you are trying to override a style that does not exist.
Fix the `disableElevation` key of `theme.overrides.MuiButton`. 

Any suggestion how we can use disableElevation to get it to work?
This one also does not work:

<MaterialButton disableElevation variant="contained" color="primary" >

Thanks in advance for suggestions

[oliviertassinari]

@negarineh theme.overrides !== theme.props