Как применить стиль для класса css с помощью UI материала withStyle. WithStyle не работает

Question

Вот мой код

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>

Я использую нематериальный компонент пользовательского интерфейса для сетки. Я хочу применить стиль с помощью пользовательского интерфейса материала со стилем и темой, поэтому я добавил withStyle для своего родительского элемента div и хочу применить стиль для дочерних классов div и дочерних CSS.

Answer 1

У вас есть несколько вариантов, самый новый использует makeStyles крючок, но вы можете использовать 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/