How to edit element.style of tagcloud?

Question

I am getting this, so how should I edit this?

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/TagCloud.min.js"></script>

element.style {
  position: relative;
  width: 500px;
  height: 500px;
}

Answer 1

import { useEffect, useRef } from "react";
import "../Skills/Skills.css";

const Skills = () => {
  const shoudLog = useRef(true);

  useEffect(() => {
    if (shoudLog.current) {
      shoudLog.current = false;
      const myTags = [
        "JavaScript",
        "CSS",
        "SASS",
        "TypeScript",
        "ES6",
        "Bootstrap",
        "HTML",
        "C++",
        "React",
        "Python",
        "Git",
        "Figma",
      ];

      const TagCloud = require("TagCloud");
      const container = ".content";

      TagCloud(container, myTags, {
        radius: 250,
        maxSpeed: "normal",
        initSpeed: "normal",
        direction: 135,
        keep: true,
      });
      document.querySelector(".content").style.color = "#00ffff";
    }
  }, []);
  return (
    <div className="skillsset" id="skills">
      <h1 className="skills-title">Skills</h1>
      <div className="skills reveal fade-bottom">
        <div className="skills-left">
          <div className="skills-para fade-bottom">
            <p>My main area of expertise is Front-End Development</p>
            <p>
              lorem ipsum
            </p>
            <p>
              {" "}
              For all the projects I used figma to design the UI of the website
            </p>
            <p>
              You may visit my Linkedin for more information and my projects at
              Github
            </p>
          </div>
        </div>

        <span className="content reveal fade-bottom">
          <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/TagCloud.min.js"></script>
        </span>
      </div>
    </div>
  );
};

export default Skills;

.skillsset {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
  background-color: var(--dark-color);
}

@media only screen and (max-width: 600px) {
  .skillsset {
    flex-direction: column;
    align-items: center;
    row-gap: 5rem;
  }
}

.skills {
  display: flex;
  /* flex-direction: column; */

  align-items: center;
  padding-left: 3rem;
  padding-right: 3rem;
  /* justify-content: space-between; */
}

@media only screen and (max-width: 600px) {
  .skills {
    flex-direction: column;
    align-items: center;
  }
}

.skills-title {
  font-size: 3.5rem;
  background-image: linear-gradient(
    to right bottom,
    var(--primary-color),
    #035d91
  );
  text-align: center;
  transition: all 0.4s;
  -webkit-background-clip: text;
  color: transparent;
}
.skills-title:hover {
  color: var(--light-color);
}

.skills-para {
  width: 80%;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  color: var(--light-color);
}

@media only screen and (max-width: 1200px) {
  .skills-para {
    font-size: 1.5rem;
  }
}

@media only screen and (max-width: 900px) {
  .skills-para {
    font-size: 1.5rem;
  }
}

@media only screen and (max-width: 600px) {
  .skills-para {
    font-size: 1.4rem;
  }
}

.skills-para p {
  text-align: left;
}

.skills-left {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  flex: 0 0 60%;
}

.skills-right {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.skills-right span {
  padding: 0.6rem 0.8rem;
  background-color: rgb(250, 250, 250);
  margin: 0.5rem;
  border: 0.1px solid rgb(230, 230, 230);
  border-radius: 7px;
}

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

/* body {
    background-color: #000
  } */

.tagcloud {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  margin: auto;
  /* width: 20%; */
}

.tagcloud--item:hover {
  color: #36454f;
}

@media only screen and (max-width: 900px) {
  .tagcloud {
    width: 20%;
  }
}

strong[style] {
  width: 0px !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>