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

您需要使用材料 ui useStyles 钩子中的类。

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)