如何编辑tagcloud的element.style

Question

我得到了这个，那么我应该如何编辑它？

<script src="https://cdn.jsdelivr.net/npm/TagCloud@2.2.0/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/TagCloud@2.2.0/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>