i want to add following class in class name dynamicaly so i wont have to make diffrent component for all the classes can any one help me solve this problem it would be big help if you can thank you
<AnnotationLabel
x={120}
y={160}
ny={140}
nx={20}
color={"#afb1b3"}
editMode={false}
className="country-bg-usa hand-cursor"
note={{
"title": "USA".toUpperCase(),
"align": "middle",
"orientation": "topBottom",
"bgPadding": { left: 7, right: 5 },
"padding": 0,
"titleColor": "white"
}}
events={{
onClick: () => gotoCountry("USA")
}}
/>
here is the css i want to place in className properties
.country-bg-canada .annotation-note-bg {
height: 23px;
fill: #ff0000;
fill-opacity: 1;
}
.country-bg-usa .annotation-note-bg {
height: 23px;
fill: #1d1de0;
fill-opacity: 1;
}
.country-bg-suriname .annotation-note-bg {
height: 23px;
width: 56px;
fill: #f8b13e;
fill-opacity: 1;
}
.country-bg-ireland .annotation-note-bg {
height: 23px;
width: 45px;
fill: #008000;
fill-opacity: 1;
}
.country-bg-unitedKingdom .annotation-note-bg {
height: 23px;
width: 88px;
fill: #0B52F7;
fill-opacity: 1;
}
.country-bg-singapore .annotation-note-bg {
height: 23px;
width: 60px;
fill: #D42441;
fill-opacity: 1;
}
You can do something like this:
<AnnotationLabel
x={120}
y={160}
ny={140}
nx={20}
color={"#afb1b3"}
editMode={false}
className={`country-bg-${Your-country} hand-cursor`} // use the template string
note={{
"title": "USA".toUpperCase(),
"align": "middle",
"orientation": "topBottom",
"bgPadding": { left: 7, right: 5 },
"padding": 0,
"titleColor": "white"
}}
events={{
onClick: () => gotoCountry("USA")
}}
/>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.