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的内置支持将hover属性添加到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

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

1 个答案: