如何使用材质 UI 和 Style 为 css 类应用样式.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>

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

Answer 1

您有多种选择，最新的是使用makeStyles钩子，但您可以使用withStylesHOC。

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/