在 React 中有条件地应用类

Question

我正在尝试应用 class active 如果 commentBadgeActive 是 true.The 图像 Scholar 应该从灰度变为彩色。

      <Paper className={classes.paper}>
            <div className={classes.profile}>
                <div className="img-collection">
                    <Tooltip title="Recieve 20 likes" arrow>
                        <div className="achievement">
                            <img className={`${likeBadgeActive ? "active" : ""}`} src={Fire} alt="monkey" />
                            <h5>Noble</h5>
                        </div>
                    </Tooltip>
                    <Tooltip title="Receive 10 comments" arrow>
                        <div className="achievement">
                            <img className={`${commentBadgeActive ? "active" : ""}`} src={Scholar} alt="monkey" />
                            <h5>Scholar</h5>
                        </div>
                    </Tooltip>
                    <Tooltip title="Upload 10 memes" arrow>
                        <div className="achievement">
                            <img className={`${screamCountActive ? "active" : ""}`} src={Knight} alt="monkey" />
                            <h5>Contributor</h5>
                        </div>
                    </Tooltip>
                </div>
            </div>
        </Paper>

造型

 "& .img-collection": {
        display: "flex",
        justifyContent: "center",


        "& .achievement": {
            display: "flex",
            justifyContent: "center",
            flexDirection: "column",
            alignItems: "center",


            "& img": {
                height: 70,
                filter: 'grayscale(100%)'
            },

            "& active": {
                height: 70,
                filter: 'grayscale(0%) !important'
            },

        },
    },

正在记录 commentBadgeActive

  const {
    classes,
    totalXP,
    userLevel,
    screamCountActive,
    commentBadgeActive,
    likeBadgeActive,
    profile: { handle, createdAt, imageUrl, bio, website, location, nativeLanguage, learnLanguage }
} = props;

console.log(commentBadgeActive);

日志语句 returns true 但 active class 未应用于图像

感谢任何帮助

Answer 1

这里你忘了在active前加上. class:

"& .img-collection": {
        display: "flex",
        justifyContent: "center",


        "& .achievement": {
            display: "flex",
            justifyContent: "center",
            flexDirection: "column",
            alignItems: "center",


            "& img": {
                height: 70,
                filter: 'grayscale(100%)'
            },

            "& .active": {
                height: 70,
                filter: 'grayscale(0%) !important'
            },

        },
    },

在 React 中有条件地应用类

Applying Classes Conditionally in React

css

reactjs

material-ui

react-props

在 React 中有条件地应用 类

Applying Classes Conditionally in React

css

reactjs

material-ui

react-props

在 React 中有条件地应用类