React-有条件地在div中应用css，但它不起作用

Question

已经看了其他的例子，并试图做同样的事情，但不确定为什么我的代码不工作。我有代码循环通过一些键，并呈现一个div。我想有条件地应用一些基于是否键是偶数或奇数的样式。例子:

<div className={parseInt(key) % 2 === 0  ? 'label1' : 'label2' }>
<span style={{ marginLeft: "10px" }}>{key}:00</span>
</div>

样式可以在同一个文件中访问，看起来像:

# Material UI 
const useStyles = makeStyles((theme) => ({
label1: {
width: "50px",
height: "16px",
top: "458px",
background: "yellow",
fontSize: "12px",
},
label2: {
width: "50px",
height: "16px",
top: "458px",
background: "red",
fontSize: "12px",
}, 
}));

我做错了什么?目前没有样式应用到div

Answer 1

您需要使用uiuseStyleshook中的材质类。

const classes = useStyles()
....
<div className={parseInt(key) % 2 === 0  ? classes.label1 : classes.label2 }>
<span style={{ marginLeft: "10px" }}>{key}:00</span>
</div>

检查useStyles钩子api: https://material-ui.com/styles/basics/

如果你有一个类组件，你可以使用钩子，那么你可以用withStyles高阶组件来做，就像这个例子:

import { withStyles } from "@material-ui/core/styles"
const styles = theme => ({
label1: {
backgroundColor: "red",
},
label2: {
backgroundColor: "red",
},
})
class ClassComponent extends Component {
state = {
searchNodes: "",
}
render() {
const { classes } = this.props
return (
<div className={parseInt(key) % 2 === 0 ? classes.label1 : classes.label2}>
<span style={{ marginLeft: "10px" }}>{key}:00</span>
</div>
)
}
}
export default withStyles(styles, { withTheme: true })(ClassComponent)