Possible to get access to cx when using withStyles?

[rlansky-percipient]

Hi, just started using tss-react as part of our upgrade to material-ui 5 and really liking it. Thanks so much for creating it!

One question I do have: when using the withStyles syntax, is it possible to get access to cx somehow (short of converting the component in question into a functional component and using makeStyles)? I'd really like to get rid of all of our classnames usage as part of this conversion.

Cheers,
--Rick

[garronej]

Hi @rlansky-percipient,
Thanks for the kind words.
I am not sure that I understand exactly how you would use cx with withStyles but do you know that you can import directly useStyles from tss-react/mui without having to first generate it using makeStyles.
It returns cx and css.

import { withStyles, useStyles } from "tss-react/mui";

type Props = {
  className?: string;
};

const MyComponent = (props: Props) => {

  const { className } = props;

  const { cx, css } = useStyles();

  return (
    <div className={cx(css({ "height": 300 }), className)}>
      {/*...*/}
    </div>
  );

};

const MyComponentStyled= withStyles(
  MyComponent,
  {
    "root": {
      "width": 200
    }
  }
);

I don't know if it's what you need...?

[rlansky-percipient]

Ah, thank you, I did not know that I could import it directly without making use of makeStyles. I think that's just what I need then. Thanks for the quick reply!