无法让 JSS 悬停以使用 React/Typescript/Material UI

Question

我对这种技术组合很陌生：React/Typescript/Material UI。

我只发现了一个关于在 Material-UI 中使用悬停的类似问题，但语法完全不同，因为 React 代码没有使用 Typescript。你可以在这里找到：Overriding with classes in material-ui v1.0.0-beta-1 shows "the key provided to the classes property is not implemented" warning

我正在尝试找到一种方法，使用它对 JSS 的内置支持将悬停属性添加到 Material-UI 纸质组件。

我得到的错误是：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

这是我的代码：

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

我想你只是遇到了一个问题https://github.com/callemall/material-ui/issues/8048