React- 在 div 中有条件地应用 css 但它不起作用
React- Conditionally applying css in div but it does not work
查看了其他示例并尝试做同样的事情,但不确定为什么我的代码不起作用。我有循环通过一些键并呈现 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
您需要使用 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)
查看了其他示例并尝试做同样的事情,但不确定为什么我的代码不起作用。我有循环通过一些键并呈现 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
您需要使用 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)