Как исправить невидимые рендеры и применить к ним css?

Question

TL; DR -> Stuff выполняет рендеринг, но невидимый в приложении React, условный рендеринг с внешней функцией JS и CSS -> Вот что происходит

Привет всем

Я работаю над приложением для развлечения, чтобы научиться работать с React. У меня есть Kotlin Springboot REST API и интерфейс React, который загружает данные через Ax ios Data Services.

Теперь я столкнулся с какой-то раздражающей ошибкой:

Я создаю Диаграмма Ганта через внешнюю функцию:

export function createChart(e) {
  const days = document.querySelectorAll(".chart-values .week");
  const tasks = document.querySelectorAll(".chart-bars .bar");
  const daysArray = [...days];

  tasks.forEach(el => {
    const duration = el.dataset.duration.split("-");
    const startDay = duration[0];
    const endDay = duration[1];
    let left = 0,
      width = 0;

    if (startDay.endsWith("½")) {
      const filteredArray = daysArray.filter(day => day.textContent === startDay.slice(0, -1));
      left = filteredArray[0].offsetLeft + filteredArray[0].offsetWidth / 2;
    } else {
      const filteredArray = daysArray.filter(day => day.textContent === startDay);
      left = filteredArray[0].offsetLeft;
    }

    if (endDay.endsWith("½")) {
      const filteredArray = daysArray.filter(day => day.textContent === endDay.slice(0, -1));
      width = filteredArray[0].offsetLeft + filteredArray[0].offsetWidth / 2 - left;
    } else {
      const filteredArray = daysArray.filter(day => day.textContent === endDay);
      width = filteredArray[0].offsetLeft + filteredArray[0].offsetWidth - left;
    }

    // apply css
    el.style.left = `${left}px`;
    el.style.width = `${width}px`;
    if (e.type === "load") {
      el.style.backgroundColor = el.dataset.color;
      el.style.opacity = 1;
    }
  });
}

window.addEventListener("load", createChart);
window.addEventListener("resize", createChart);

Эта функция импортируется в этот JSX-файл:

import React, { useEffect } from "react";
import styled from "styled-components";
import Timeline from "../organisms/ResourceTimeline";
import Toolbar from "../molecules/Toolbar";
import SearchBar from "../molecules/SearchBar";
import SummaryBox from "../organisms/SummaryBox";
import { createChart } from "../../core/helpers/BuildChart";

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: stretch;
  align-content: stretch;
  padding: 30px;
`;

const TopSection = styled.div`
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  align-content: stretch;
  margin-bottom: 30px;
`;

const ResourceView = () => {

  useEffect(() => {
    createChart();
  }, []);

  return (
    <Wrapper>
      <TopSection>
        <SearchBar />
        <Toolbar />
      </TopSection>
      <Timeline />
      <SummaryBox />
    </Wrapper>
  );
};

export default ResourceView;

Временная шкала выглядит следующим образом:

import React, { useState, useEffect } from "react";
import styled from "styled-components";
import Days from "../molecules/Days";
import { createChart } from "../../core/helpers/BuildChart";
import "../../core/helpers/GirdCalendar.css";
import CreateRequirementDialog from "./CreateRequirementDialog";
import PersonDataService from "../../core/services/PersonDataService";
import ChartBar from "../molecules/ChartBar";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPlus } from "@fortawesome/free-solid-svg-icons";

const TimeLineWrapper = styled.div`
  height: 80vh;
  z-index: 10;
  overflow: scroll;
  box-shadow: 0px 10px 30px 10px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  border-radius: 20px;
  padding: 15px;
`;

const Container = styled.div`
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  align-content: stretch;
`;

const ChartBars = styled.ul`
  height: 35vh;
  width: 368%;
  border-bottom: 1px solid black;
`;

const AddReqButton = styled.button`
  outline: none;
  min-height: 20px;
  min-width: 20px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 50%;
  color: white;
  border: none;
  margin-left: 10px;
  box-shadow: 0 10px 30px 10px rgba(0, 0, 0, 0.1);
  background-color: #0085ff;
  transition: 0.2s ease-in-out;

  &:hover {
    transform: scaleX(1.05) scaleY(1.05);
    box-shadow: 0 10px 30px 10px rgba(39, 94, 254, 0.2);
  }
`;

const NameContainer = styled.div`
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: left;
  align-items: center;
  align-content: stretch;
  min-width: 20%;
  margin-right: 5%;
`;

const Timeline = () => {
  const [people, setPeople] = useState([]);
  const [showReqDialog, setShowReqDialog] = useState(false);

  const refreshPeople = () => {
    PersonDataService.getAllPeople().then((response) => {
      setPeople(response.data);
    });
  };

  useEffect(() => {
    refreshPeople();
  }, []);

  return (
    <>
      {showReqDialog ? (
        <CreateRequirementDialog changeState={() => setShowReqDialog(false)} />
      ) : null}
      <TimeLineWrapper id={"timeline"}>
        {people.map((person, key) => (
          <Container key={key} className={"container"}>
            <NameContainer>
              <h3>
                {person.firstName} {person.lastName}
              </h3>
              <AddReqButton onClick={() => setShowReqDialog(true)}>
                <FontAwesomeIcon icon={faPlus} />
              </AddReqButton>
            </NameContainer>
            <div className={"chart-wrapper"}>
              <ul className={"chart-values"}>
                <Days />
              </ul>
              <ChartBars className={"chart-bars"}>
                <ChartBar personId={person.personId} />
              </ChartBars>
            </div>
          </Container>
        ))}
      </TimeLineWrapper>
    </>
  );
};

export default Timeline;

ChartBar как это:

import React, { useState, useEffect } from "react";
import styled from "styled-components";
import ChartBarItem from "../molecules/ChartBarItem";
import { toWeek } from "../../core/helpers/ToWeek";
import "../../core/helpers/BuildChart";
import "../../core/helpers/GirdCalendar.css";
import RequirementDataService from "../../core/services/RequirementDataService";

const ChartBars = styled.div`
  height: 35vh;
  width: 368%;
  border-bottom: 1px solid black;
`;

const ChartBar = ({ personId }) => {
  const [requirements, setRequirements] = useState([]);

  useEffect(() => {
    refreshRequirements();
    console.log(requirements);
  }, []);

  const refreshRequirements = () => {
    RequirementDataService.getRequirementsByPersonId(personId).then(
      (response) => {
        setRequirements(response.data);
      }
    );
  };
  return (
    <>
      {requirements.map((requirement, key) => (
        <ChartBarItem
          key={key}
          startDate={"KW01"}
          endDate={"KW06"}
          height={"80%"}
          title={"TEST"}
          reqPercentage={"80%"}
          backgroundColor={"green"}
        ></ChartBarItem>
      ))}
    </>
  );
};

export default ChartBar;

ChartBarItem:

import React from "react";
import styled from "styled-components";
import { SortablePane, Pane } from "react-sortable-pane";

const ChartBarItemTitle = styled.p`
  font-size: 18px;
  color: white;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
`;

const ChartBarItem = ({
  title,
  reqPercentage,
  backgroundColor,
  startDate,
  endDate,
  height,
}) => {
  const ChartBarItem = styled.li`
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: space-between;
    position: relative;
    color: #ffffff;
    height: ${height};
    background-color: ${backgroundColor};
    font-size: 16px;
    padding: 10px 20px;
    box-shadow: 0px 10px 30px 10px rgba(0, 0, 0, 0.1);
    width: 0px;
    opacity: 0;
    position: relative;
    font-size: 16px;
    border-radius: 10px;
    width: 0;
    opacity: 0;
    transition: all 0.65s linear 0.2s;

    @media screen and (max-width: 600px) {
      padding: 10px;
    }
  `;

  return (
    <ChartBarItem className={"bar"} data-duration={`${startDate}-${endDate}`}>
      <ChartBarItemTitle>{reqPercentage} - {title}</ChartBarItemTitle>
    </ChartBarItem>
  );
};

export default ChartBarItem;

И ТЕПЕРЬ САМАЯ ВАЖНАЯ ЧАСТЬ: все работает, но почему-то не видно, я думаю, это из-за css, я могу см. все в инструменте инспектора в chrome.

Как видите, вот что происходит

Эта ошибка очень расстраивает, и мне нужно ее исправить, Буду очень признателен за вашу помощь, спасибо!