css - 如何使用 Material UI withStyles 为 css 类应用样式。 WithStyles 不工作

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>

我正在为网格使用非 Material ui 组件我想通过 Material UI withstyle 和 theme 应用样式，所以我为我的父 div 添加了 withStyle，我想为子 div 和子 CSS 类应用样式。

Answer 1

您有多种选择，最新的是使用 makeStyles Hook ，但您可以使用 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/