How to apply style for css class using Material UI withStyle. WithStyle is not working

Question

Here is My Code

import { withStyles, MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';

import classNames from 'classnames';


const styles = theme => ({
    myGridStyle:{
        '&:.my-row-selected':{
            backgroundColor:"#ff9900 !important"
        }
    },
});

<div className={myGridStyle}> 
    <div role="row" class="my-row-selected" style="height: 30px;"></div>
</div>

I am using non material ui component for grid I want to apply style through Material UI withstyle and theme, so I have added withStyle for my parent div and i want to apply style for child div and child CSS classes.

Answer 1

You have several options, the newest is using the makeStyles hook, but you can use the withStyles HOC.

const styles = theme => ({
    myGridStyle: {
        '&:.my-row-selected':{
            backgroundColor:"#ff9900 !important"
        }
    },
});

function myGrid(props) {
  const { classes } = props;
  return (
    <div className={classes.myGridStyle}> 
        <div role="row" class="my-row-selected" style="height: 30px;"></div>
    </div>
  );
}

export default withStyles(styles)(myGrid);

https://material-ui.com/styles/basics/