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

您需要使用 material ui useStyles 钩子中的 classes。

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/

如果你有一个 class 组件并且你可以使用钩子，那么你可以使用 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)

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

React- Conditionally applying css in div but it does not work

css

reactjs

css-selectors

react-css-modules