2

I am creating a set of reusable components (wrapped material-ui) which are being styled using CSS. I need to set the width of the component dynamically via a prop passed into the custom button.

I want to use classnames to merge the const root style defined for MyButton (I have stripped this back in the sandbox, but it sets colours, icons etc) and the dynamic sizeStyle which can be defined based on the prop passed in.

  const sizeStyle: JSON =  { minWidth: "300px !important"};


  //always apply the buttonstyle, only apply the size style if a width prop has been supplied
  const rootStyle: Object = classNames({
    buttonStyle: true,
    sizeStyle: props.width
  ///});

I can't see why the style isn't being applied to the first button on the page where there is a prop passed through - I can see on the console that the two style are supposed to be applied.

Sandbox here: https://codesandbox.io/s/css-styling-custom-muibutton-width-as-prop-36w4r

TIA

tmc
  • 404
  • 1
  • 7
  • 20

1 Answers1

5

you need to pass props to your useStyles(props) function, then inside this you can use props like styled-component.

Document link: https://material-ui.com/styles/basics/#adapting-based-on-props

// eslint-disable-next-line flowtype/no-weak-types
const useStyles = makeStyles({
  root: {
    //    minWidth: "300px !important",
    color: "#565656",
    backgroundColor: "salmon",
    borderRadius: 2,
    textTransform: "none",
    fontFamily: "Arial",
    fontSize: 16,
    letterSpacing: "89%", //'0.09em',
    boxShadow:
      "0px 1px 5px 0px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 3px 1px -2px rgba(0,0,0,0.12)",
    "&:disabled": {
      color: "#565656",
      opacity: 0.3,
      backgroundColor: "#fbb900"
    },
    minWidth: props => `${props.width}px`,
  },
  label: {
    textTransform: "capitalize",
    display: "flex",
    whiteSpace: "nowrap"
  }
});

// eslint-disable-next-line flowtype/require-return-type
function MyButton(props) {
  const { children, ...others } = props;
  const classes = useStyles(props);

  return (
    <Button
      {...props}
      classes={{
        root: classes.root,
        label: classes.label
      }}
    >
      {children}
    </Button>
  );
}

Modified version from your sandbox: https://codesandbox.io/s/css-styling-custom-muibutton-width-as-prop-pcdgk?fontsize=14&hidenavigation=1&theme=dark

Hope this help

Duc Hong
  • 1,149
  • 1
  • 14
  • 24
  • 1
    fantastic, that worked a charm. and a nice clean solution. thanks. – tmc Nov 18 '19 at 22:36
  • 1
    you're welcomed, actually I've never overriding MUI classes directly with passing styles to `classes` like you did, I also learn something new from you. For months I only use className={cx({...}} – Duc Hong Nov 19 '19 at 01:28