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

编程问答 2022-10-03

问题描述

enter image description here

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

解决方法

您可以使用 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%)",}),});
reactjsreactjsreactjsreactjstsx