我对这种技术组合很陌生:React/Typescript/Material UI。
我只发现了一个关于在 Material-UI 中使用悬停的类似问题,但语法完全不同,因为 React 代码没有使用 Typescript。您可以在这里找到:Overriding with classes in material-ui v1.0.0-beta-1 显示“提供给 classes 属性的键未实现”警告
我试图找出一种方法来使用它对 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;