css Question posted in
Some basic documentation can be found here.

Css – Stylings not being applied when classList is dynamically changed

Okay so im building a web app using react and i have a component called slice which contains two project components and i would like to change their width based off of a hover event. i know that the class is being added to the class list but the styles are not being applied. ive tried changing other styles as indicators to see if it was just a problem with the width or the classList but that doesnt work either.

slice.js:

import { useState, useEffect } from "react";
import Project from "./Project";
import "./Slice.css";
import { v4 as uuidv4 } from "uuid";

export default function Slice(props) {
    const data = props.sliceData.projects;
    const [projectElements, setProjectElements] = useState([]);
    const projectUIDs = [uuidv4(), uuidv4()];

    useEffect(() => {
        const elements = [
            document.getElementById(projectUIDs[0]),
            document.getElementById(projectUIDs[1]),
        ];
        setProjectElements(elements);

        return () => {
            elements.forEach((element, index) => {
                if (element) {
                    element.removeEventListener("mouseover", () =>
                        handleMouseOver(index)
                    );
                    element.removeEventListener("mouseout", () =>
                        handleMouseOut(index)
                    );
                }
            });
        };
    }, []);

    const handleMouseOver = (index) => {
        projectElements[index].classList.add("maximized");
        projectElements[index ^ 1].classList.add("minimized");
    };

    const handleMouseOut = (index) => {
        projectElements[index].classList.remove("maximized");
        projectElements[index ^ 1].classList.remove("minimized");
    };

    const generateProjects = () => {
        return data.map((project, index) => (
            <Project
                key={uuidv4()}
                uid={projectUIDs[index]}
                projectData={project}
                onMouseEnter={() => handleMouseOver(index)}
                onMouseLeave={() => handleMouseOut(index)}
            />
        ));
    };

    return <div className="slice">{generateProjects()}</div>;
}

Slice.css:

.slice {
    height: 50vh;
    width: 100%;
    display: flex;
}

.projectWrapper {
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: black;
    padding: 2rem;
    overflow: hidden;
    transition: flex-grow 0.5s ease-in-out;
    width: 100%; /* Ensure each projectWrapper occupies the full width */
}

.projectWrapper img {
    flex: 1; /* Use flex shorthand to distribute space equally */
    max-width: 50%; /* Set maximum width for the image */
}

.projectWrapper h1 {
    flex: 1; /* Use flex shorthand to distribute space equally */
    font-size: 2rem;
    font-weight: 700;
    max-width: 40%; /* Set maximum width for the h1 element */
}
.minimized{
    flex-grow: 0;
}
.maximized{
    flex-grow: 1;
}




@media (max-aspect-ratio: 155/100) {
    .slice{
        flex-direction: column;
        height: fit-content;
    }
    .projectWrapper{
        height: 50vh;
    }
}

@media (max-width: 450px) {
    .projectWrapper{
        flex-direction: column;
        align-items: center;
    }
    .projectWrapper h1{
        text-align: center;
        width: 80%;
        max-width: none;
    }
    .projectWrapper img{
        width: 80%;
        max-width: none;
    }
}

i was hoping that the styles inside the .minimized and .maximized classes would be applied to the project components when hovered

Tags:

2

Answers


  1. 0

    I can see that there is a small typo which is restricting you to achieve the said results.

    projectElements[index].classList.add("maximize"); is adding maximize class but on css file you have written maximized class.

    If this doesn’t work feel free to ask further questions.

    Login or Signup to reply.
  2. 0

    In React, you should try to avoid direct DOM manipulation as much as possible and instead use the component state and props.
    More React-friendly way to handle your hover events using state:

    export default function Slice(props) {
    const data = props.sliceData.projects;
    const [hoverIndex, setHoverIndex] = useState(null);

    const handleMouseOver = (index) => {
        setHoverIndex(index);
    };

    const handleMouseOut = () => {
        setHoverIndex(null);
    };

    const generateProjects = () => {
        return data.map((project, index) => (
            <Project
                key={uuidv4()}
                projectData={project}
                isHovered={hoverIndex === index}
                onMouseEnter={() => handleMouseOver(index)}
                onMouseLeave={handleMouseOut}
            />
        ));
    };

    return <div className="slice">{generateProjects()}</div>;
}

    Pay attention to new prop for Project component – isHovered. Based on it you can add class in Project component, like:

    <div className={isHovered ? "maximized" : "minimized" }></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search