0

I tried to create a custom styled button with material ui to reuse in other files of my project. Somehow, the button does not adapt the style i defined. Could someone tell me where I made a mistake / forgot something ? 

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import IconButton from '@material-ui/core/IconButton';


const styles = themes => ({

    root: {
        margin: "50px",
        padding: "20px",
        display: 'block'
    },

    button: {
        marginTop: '20px',
        padding: '100px',
        height: "300px+15vh",    
        width: "300px+15vw",
        borderRadius: "20% 20%",
        color: '#FFFFFF',
        backgroundColor: '#05164D',
        '&:hover': {
        backgroundColor: "rgba(5, 22, 77, 0.75)",
        boxShadow: '0 3px 5px 2px rgba(153, 153, 153, .8)'
      },
  },


});


const styledButton = props => { 

      const { classes } = props;

      return (

      <div>

      <IconButton className={classes.button} {...props} aria-label="Gift" disableTouchRipple="true">

       {props.children}

      </IconButton>

      </div>

    )

}


export default withStyles(styles)(styledButton);
Lisa
  • 9
  • 4
  • Your button seems to get the style (but there are some errors in console - do you get them too?) https://stackblitz.com/edit/react-nguxdy?file=Hello.js – barbsan Mar 11 '19 at 11:32
  • Hi, thanks for your help, i do get the errors and in your editor i do see that the button got the style; but in my application where I want to use it still doesn't – Lisa Mar 11 '19 at 11:45
  • Seems that you can use only one of the following class names: https://material-ui.com/api/icon-button/#css . Take a look at https://material-ui.com/customization/overrides/#1-specific-variation-for-a-one-time-situation – barbsan Mar 11 '19 at 11:50
  • hi barbsan, now the error message went away but it is still not possible for me to reuse the button as , do you know why that might be? – Lisa Mar 11 '19 at 12:05
  • never mind, i got it! It has to be a Capital with Styled Button in react, i forgot about that ! thank you for your help ! – Lisa Mar 11 '19 at 12:09

0 Answers0