Can't get JSS hover to work with React/Typescript/Material UI

Question

I am quite new to this combination of technologies: React/Typescript/Material UI.

I only found one similar question about using hover with Material-UI but the syntax was quite different as the React code did not use Typescript. You can find this here: Overriding with classes in material-ui v1.0.0-beta-1 shows "the key provided to the classes property is not implemented" warning

I am trying to figure out a way to add the hover property to the Material-UI paper component using it's inbuilt support for JSS.

The error I get is: Material-UI: the key .Component-root-199:hover provided to the classes property object is not implemented in Paper. You can only overrides one of the following: root,rounded,shadow0,shadow1,shadow2,shadow3,shadow4,shadow5,shadow6,shadow7,shadow8,shadow9,shadow10,shadow11,shadow12,shadow13,shadow14,shadow15,shadow16,shadow17,shadow18,shadow19,shadow20,shadow21,shadow22,shadow23,shadow24

This is my code:

import * as React from 'react';
import {withStyles} from 'material-ui/styles';
import Paper from 'material-ui/Paper';
import {StyleRulesCallback} from 'material-ui/styles/withStyles';

const styleSheetPaper: StyleRulesCallback = (theme) => ({
  root: {
    color: theme.palette.text.secondary,
    padding: theme.spacing.unit * 2,
    '&:hover': {
      cursor: 'pointer',
    },
  }
});

interface IStyles {
  root: any;
}

const ODPaper = withStyles<JSX.ElementChildrenAttribute, IStyles>(styleSheetPaper)((props) => {
  return (
    <Paper {...props} className={props.classes.root}>
  {props.children}
  </Paper>
);
});

export default ODPaper;

Answer 1

I think you just run into an issue https://github.com/callemall/material-ui/issues/8048