TSX CSS条件呈现总是给出真实的语句

Question

在此处输入图像描述

transform:aboutMe=>(关于我？"translateY(-500%("："translateY(0%("(

因此，我曾经运行我的React项目，并使用MaterialUi的MakeStyles将CSS包含在同一个tsx文件中，并从JavaScript代码中获益，以进行条件渲染。现在我正在将我的项目更改为Gatsby，但由于某种原因，上面的代码不起作用，它一直认为该语句是真的，尽管我正在控制台中记录它，并且它按照应该的方式工作。你知道为什么这里的语句总是被认为是真的吗？

import React from "react"
import { StaticImage } from "gatsby-plugin-image"
import { makeStyles } from "@material-ui/core/styles"
interface Props {
aboutMe: boolean
aboutMeOpen: () => void
}
export default function Background(props: Props) {
const classes = useStyles()
const { aboutMe, aboutMeOpen } = props
return (
<div className={classes.body}>
<div className={classes.effect}>
<StaticImage
src="../../images/backgroundEffect.png"
alt="effect"
quality={50}
draggable={false}
/>
</div>
</div>
)
}
const useStyles = makeStyles({
effect: {
zIndex: 10,
position: "absolute",
bottom: 0,
right: 0,
// userSelect: "none",
// height: "100%",
transition: "0.5s",
transform:  aboutMe => ( aboutMe ? "translateY(100%)" : "translateY(0%)"),
},
})

Answer 1

您可以使用2个className:

<div className={aboutMe ? classes.effect1 : classes.effect1 } >

或者添加内联样式：

<div className={classes.effect} style={{trasform:  aboutMe ? "translateY(100%)" : "translateY(0%)"}} >

或者，您可以像这样将参数传递给useStyles：

const classes = useStyles({ aboutMe: props.aboutMe });
const useStyles = makeStyles({
effect: ({ aboutMe }) => ({
// ...
backgroundColor: aboutMe ? "translateY(100%)" : "translateY(0%)",
}),
});