WithStyles type error

[jaalah]

We have lots of class components that we're slowly converting to functional components. I didn't find much documentation on migrating classes, so below is a dumbed down version of a type error we're getting.

Given we have a class such as:

import * as React from 'react';
import { withStyles } from 'tss-react/mui';
import { WithStyles } from '@mui/styles';

type Props = WithStyles<'root'>;

const styles = () => ({
  root: {
    backgroundColor: 'red',
  },
});

export class MyComponent extends React.Component<Props> {
  render() {
    const { classes } = this.props;

    return <div className={classes.root}>testing</div>;
  }
}

export default withStyles(MyComponent, styles);

When we go to use this component, we get:

Property 'classes' is missing in type '{}' but required in type '{ classes: ClassNameMap<"root">; }'.

We're using the WithStyles type from @mui/styles to define the Props type of the MyComponent class component where classes is required. In tss-react, there is no equivalent WithStyles type.

We could define our own WithStyles type on our end, or satisfy the type checker by replacing type Props = WithStyles<'root'>; with:

type Props = {
  classes: {
    root: string;
    // ...
  };
};

However we'd have to add <MyComponent classes={{ root: 'my-class' }} /> wherever we use this class.

Is this something that tss-react should cover?

[garronej]

Hello @jaalah,
You're right, the documentation wasn't clear enough about this usecase.
I just updated it: https://docs.tss-react.dev/api/withstyles#with-class-components

Also, update tss-react

I hope it's clear

[garronej]

@jaalah OMG I just saw your donation, thank you so much, it's the first donation I received ever after all these years of OSS work. Needless to say, it means the world to me!

EDIT: Well I got my first two soponsor the same day, figure that!

[garronej]

@jaalah, Hold on, I'm making an other update to improve the DX

[garronej]

There you go: https://docs.tss-react.dev/api/withstyles#with-class-components

Let me know if it fits your needs!

[jaalah-akamai]

Thanks for making the changes so fast! Everything is fixed and the DX is much better too. I appreciate the work you've done and thanks for helping the community 🚀