React hover style not working when used with Radium and Material-UI

Question

I am using Radium library for inline styling in react . Using it works fine for other components but i am having issues with Material-UI components. When i hover my mouse over the Paper , it doesn't change the color to green . What's wrong here ? How do I fix this ?

import React, { Component, Fragment } from 'react';
import { Grid, GridList, Paper, ListItem, List, ListItemIcon, ListItemText } from '@material-ui/core';
import { connect } from 'react-redux';
import Radium from 'radium';

class AchievementsHome extends Component {

    render() {

        return <>
            <Grid container alignItems="center" direction="column">
                <h1>Achievements</h1>

                <Paper
                style={{backgroundColor:'red' , ':hover':{backgroundColor:'green' }}
                 >
                   <h1>Hi</h1>
                </Paper>
            </Grid>
        </>
    }
}

const mapStateToProps = (state) => {
    return {
        achievements: state.achievements
    }
}

export default connect(mapStateToProps)(Radium(AchievementsHome)); 

Answer 1

With Material UI external styles ( so styles not directly from the Material UI library ) hardly ever work, to change the color on hover you will have to set a theme as explained in the Themes section of the docs

First grab the import withStyles and define a theme.

import { withStyles } from "@material-ui/core/styles";


const customStyles = theme => ({
  root: {
    backgroundColor: "red",
    "&:hover": {
      backgroundColor: "green"
    }
  }
});

Than define a new component that is wrapped with withStyles:

const CustomPaper = withStyles(customStyles)(Paper);

In your render use the component you defined:

     <CustomPaper
     />

Hope this helps.

Answer 2

Material UI provides its own way of styling using CSS in JS (JSS). It provides a withStyles higher order component and a withTheme and lets you style at a global theme level. You can also pass class names for some components for custom styling.

You do not need to use Radium to style Material UI components.

Also your CSS selector for hovering needs to include the parent CSS selector:

const paperStyle = {
  backgroundColor: 'red',
  '&:hover': {
    backgroundColor: 'green'
  }
}

return (
  <Paper styles={paperStyle}>
    <Typography variant="h1">Hi</Typography>
  </Paper>
);