2

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));
Natesh bhat
  • 12,274
  • 10
  • 84
  • 125

2 Answers2

5

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.

Dmitriy
  • 1,211
  • 1
  • 11
  • 28
  • Please give the code relative to my above shown code. – Natesh bhat Dec 18 '18 at 14:46
  • And explain your solution relative to Radium – Natesh bhat Dec 18 '18 at 14:55
  • 1
    Like i mentioned Material UI doesn't work with external style libraries like Radium for the most part, I've edited my answer to match your specific code. – Dmitriy Dec 18 '18 at 15:20
  • What other pseudo selectors does it support ? I browsed through the link you sent , no where they mention such selectors or "hover" for that matter . Please redirect to a link which has the info if you know . – Natesh bhat Dec 18 '18 at 18:26
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>
);