Как применить стиль для класса CSS с помощью Material 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 /основы /