如何使用 Material UI withStyle 为 css 类应用样式。 WithStyle 不工作答案

【问题标题】：How to apply style for css class using Material UI withStyle. WithStyle is not working如何使用 Material UI withStyle 为 css 类应用样式。 WithStyle 不工作
【发布时间】：2019-10-10 08:48:59
【问题描述】：

这是我的代码

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>

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

【问题讨论】：

您缺少withStyles HOC。或者你可以使用makeStyles钩子

标签： css reactjs material-ui react-with-styles

【解决方案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/

【讨论】：