TSX CSS 条件渲染总是给出真实的陈述

Question

enter image description here

转换：aboutMe => (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 个类名：

<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%)",
  }),
});

TSX CSS 条件渲染总是给出真实的陈述

TSX CSS conditional rendering always giving true statment

css

reactjs

tsx