Material Design: How to maintain both type safety and styling with generic components

dataTable.tsx

class DataTable<T> extends React.PureComponent<Props<T>, State> {
  // nothing special about the implementation of DataTable. Just keep it
  // unexported, because it will be exposed via the Wrapped thing below.
}

// If you have a component that takes type parameters and need to use 'withStyles', here is a
// way to maintain type safety:
//
// DataTable:        Our custom component to wrap.
// T:                Type parameter for DataTable
// styles:           Function to apply themed CSS. signature is:
//                   (theme: Theme) => Record<"root" | "table", CSSProperties>
// WrappedDataTable: To placate TS compiler and use 'withStyles'. The secret is
//                   the 'C' member function, which is what the ['C'] is about.
export default class WrappedDataTable<T> extends React.PureComponent<
  PropsOf<WrappedDataTable<T>['C']>,
  State
> {
  private readonly C = withStyles(styles)((props: DataTable<T>['props']) => (
    <DataTable<T> {...props} />
  ));

  render() {
    return <this.C {...this.props} />;
  }
}

This is just re-stating the original inspiration from mui/material-ui#11921 (comment)