Using withStyles with Typescript in the new @material-ui/core

Question

I'm trying to update some of my old Typescript that used material-ui@next to the new @material-ui/core.

Typescript Version: 2.8.3
@material-ui/core: 1.1.0

I've implemented a very simple component that takes a single prop but the typescript compiler throws the following error when it is used

src/App.tsx(21,26): error TS2322: Type '{ classes: true; imageUrl: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Placeholder> & Readonly<{ children?: ReactNode; }>...'.
  Type '{ classes: true; imageUrl: string; }' is not assignable to type 'Readonly<PROPS_WITH_STYLES>'.
    Types of property 'classes' are incompatible.
      Type 'true' is not assignable to type 'Record<"root", string>'.

Here's the component Placeholder.tsx

import * as React from "react";
import { StyleRulesCallback, WithStyles, withStyles, StyledComponentProps } from "@material-ui/core";

export interface IPlaceholderProps {
    imageUrl: string;
}

export const STYLES: StyleRulesCallback<"root"> = theme => ({
    root: {
        display: "flex",
        justifyContent: "center",
        alignItems: "center"
    }
});

export type PROPS_WITH_STYLES = IPlaceholderProps & WithStyles<"root">;

export class Placeholder extends React.Component<PROPS_WITH_STYLES, {}> {
    render(){
        return <div className={this.props.classes.root}>
            <img src={this.props.imageUrl}/>
        </div>;
    }
}

export default withStyles(STYLES, { withTheme: true })<PROPS_WITH_STYLES>(Placeholder);

Coming from google check out stackoverflow.com/a/53142942/3414799 — James Salamon
– James Salamon, Commented Mar 7, 2019 at 16:01

Daniel Gabor · Accepted Answer · 2020-12-08 10:23:27Z

3

i've also encounter some problemes while trying to create a type for my styles, so here how you can properly type your style if WithStyles from material-ui doesn't work

const styles = (props) => ({
  container: {
    display: 'flex',
  }      
})
 

type Props = {
  blabla: string;
  classes: Record<keyof ReturnType<typeof styles>, string>
}

You may also want to create an utiliy type for this

const styles = (props) => ({
  container: {
    display: 'flex',
  }       
})
 

type MaterialStyle<S> = { 
  classes: Record<keyof S, string>
}


type Props = {
  blabla: string;
} & MaterialStyle<ReturnType<typeof styles>>

Let me know if you find a better and shorter way to do the same thing :)

answered Dec 8, 2020 at 10:23

Daniel Gabor

1,52812 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aniko Litvanyi · Accepted Answer · 2018-05-28 07:33:25Z

2

Add classes to IPlaceholderProps as a property:

export interface IPlaceholderProps {
    ...
    classes
}

answered May 28, 2018 at 7:33

Aniko Litvanyi

2,1591 gold badge24 silver badges25 bronze badges

1 Comment

BlisterFingers Over a year ago

That does make it compile, thanks. Kinda feel like withStyles isn't worth all this boilerplate, though.

Collectives™ on Stack Overflow

Using withStyles with Typescript in the new @material-ui/core

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related