Generic type arguments in JSX elements with withStyles

Question

In React with material-ui I am trying to create a JSX component that accepts generic parameters and also uses the withStyles HOC to inject my styles.

Th

Answer 1

Here is a solution that doesn't create a wrapper component. Instead it creates a type that is like the component type just without the 'classes' property.

   // TypeUtils.tsx
   // from: https://stackoverflow.com/questions/48215950/exclude-property-from-type
   export type Omit = Pick>

Using this helper type you can create the type you want and cast your styled component to that type

   type FixedCheckBoxType = (props: Omit, 'classes'>) => JSX.Element;
   export const FormCheckBox = withStyles(checkboxStyles)(UnstyledFormCheckBox) as FixedCheckBoxType;

There might be a better way to do this, but ideally this would be done automatically by material-ui itself.