CODEWITHSUNDEEP
reactjstypescriptreact-typescriptjss
Akshay K Nair
Akshay K Nair

Reputation: 1476

Typescript React; How to give type to JSS classes object

My react code:

import React from 'react';
import withStyles from "react-jss";

const styles = {
      box: {
          border: "2px solid #000"
      }
  };

interface ComponentProps {}

class Welcome extends React.Component<ComponentProps> {
    render() {
      const {classes, children} = this.props;
      return(<div className={classes.box}></div>);
    }
  }

  export default withStyles(styles)(Welcome);

In this const {classes, children} = this.props; is showing this error at classes:

Property 'classes' does not exist on type 'Readonly<ComponentProps> & Readonly<{ children?: ReactNode; }>'.ts(2339)

Only way to get rid of this error seems to be doing this;

interface ComponentProps {
    classes:any
  }

But using any is semantically wrong. What type should I give to classes, or is this not how jss is used in typescript-react?
(JSS how to use with TS: github.com/cssinjs/jss/blob/master/docs/react-jss-ts.md (only functional component))

Upvotes: 0

Views: 769

Answers (1)

Seth Lutske
Seth Lutske

Reputation: 10696

It looks like you are using withStyles, which comes from material ui. Material UI has CSSProperties, which is what you need.

import { CSSProperties } from "@material-ui/styles";

interface ComponentProps {
  classes: CSSProperties;
}

For a non-MUI solution, check out CSSType:

import CSS from "csstype";

interface ComponentProps {
  classes: { [key: string]: CSS };
}

Upvotes: 1

Related Questions