С внешними стилями пользовательского интерфейса материалов (так что стили, не относящиеся непосредственно к библиотеке пользовательского интерфейса материалов) практически не работают, чтобы изменить цвет при наведении, вам нужно установить тему, как описано в разделе Темы docs
Сначала захватите импорт с помощью стилей и определите тему.
import { withStyles } from "@material-ui/core/styles";
const customStyles = theme => ({
root: {
backgroundColor: "red",
"&:hover": {
backgroundColor: "green"
}
}
});
Чем определите новый компонент, обернутый с помощью стилей:
const CustomPaper = withStyles(customStyles)(Paper);
При использовании для рендерингакомпонент, который вы определили:
<CustomPaper
/>
Надеюсь, это поможет.