如何自定义react-typescript-datamaps地图的国家名称字体样式与大小？

我在React+TypeScript项目中使用react-typescript-datamaps库时，无法自定义地图上显示的国家名称的字体样式和大小，尝试多种方法都没找到合适的修改方案。

以下是我的MapView组件代码：

import React, { useEffect, useState } from "react";
import { DataMapsWrapper } from "react-typescript-datamaps";
import { useDispatch, useSelector } from "react-redux";
import AttackHelper from "./AttackHelper";
import BlastHelper from "./BlastHelper";

import BubblesConfig from "./BubblesConfig";
import {  getThreatsMapData } from "../store/dataSlice";


const MapView = () => {
  const dispatch = useDispatch();
  const [index, setIndex] = useState(0);
  const [dstloc, setDstloc] = useState();
  const [srcloc, setSrcloc] = useState();
  const [arc, setArc] = useState([]);
  const [blast, setBlast] = useState([]);

  const loading = useSelector((state) => state.threatsMap.data.loading);
  const data = useSelector((state) => state.threatsMap.data.threatsMapData);

  const intervalValue = useSelector(
    (state) => state.threatsMap.state.intervalValue
  );

  const getThreatsMap = () => {
    dispatch(getThreatsMapData({  }));
  };

  useEffect(() => {
    getThreatsMap();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    const interval = setInterval(() => {
      if (loading || !data[index]) return;

      const eventData = data[index];

      const srcAttribute = eventData.Attributes.find(
        (item) => item.type === "ip-src"
      );
      const dstAttribute = eventData.Attributes.find(
        (item) => item.type === "ip-dst"
      );
      const IPv4Attribute = eventData.Attributes.find(
        (item) => item.type === "IPv4"
      );

      // Check if at least one of the attributes exists
      if (srcAttribute || dstAttribute || IPv4Attribute) {
        if (srcAttribute) {
          // setSrc([srcAttribute.value]);
          const srcLoc = srcAttribute.geo_localisation[0];
          setSrcloc({ country: srcLoc.country_name, ...srcLoc });
        }

        if (dstAttribute) {
          // setDst([dstAttribute.value]);
          const dstLoc = dstAttribute.geo_localisation[0];
          setDstloc({ country: dstLoc.country_name, ...dstLoc });
        }

        if (IPv4Attribute && IPv4Attribute.type === "IPv4") {
          // setIPv4([IPv4Attribute.value]);

          const ipv4Loc = IPv4Attribute.geo_localisation[0];
          const blast = BlastHelper({
            latitude: ipv4Loc.latitude,
            longitude: ipv4Loc.longitude,
            country: ipv4Loc.country_name || "Unknown",
            animate: true,
            highlighted: ipv4Loc.country_name || "Unknown",
          });
          setBlast([blast]);
        }

        const executeAttack = async () => {
          if (srcAttribute && dstAttribute && srcloc && dstloc) {
            const attack = AttackHelper(srcloc, dstloc);
            setArc((prevArc) => [...prevArc.slice(-3), attack]);
            setBlast([]);
          } else if (srcAttribute && srcloc) {
            const blast = BlastHelper(srcloc);
            setBlast([blast]);
          } else if (dstAttribute && dstloc) {
            const blast = BlastHelper(dstloc);
            setBlast([blast]);
          } else {
            // Handle other cases as needed
          }
        };

        executeAttack();
      }

      setIndex((prev) => (prev + 1) % data.length);
    }, intervalValue);

    return () => clearInterval(interval);
  }, [index, data, loading, intervalValue]);


  return (
    <div className={`map-container`}>
      <div className={`flex  items-center justify-between`}>
        <div>
          <DataMapsWrapper
            projection="mercator"
            responsive
            attacks={arc}
            bubbles={blast}
            geographyConfig={{
              popupOnHover: true,
              highlightOnHover: true,
              highlightFillColor: "#FC8D59", 
              highlightBorderColor: "#FC8D59", 
              borderColor: "#364d53",
              borderWidth: 0.5,
              dataType: "topojson",
              dataUrl: "/map/map.topojson",
              highlightBorderWidth: 3, 
              highlightBorderOpacity: 1, 
              highlightFillOpacity: 0.5, 
            }}
            fills={{
              defaultFill: "#101518",
              MAJOR: "#306596",
              MEDIUM: "#0fa0fa",
              MINOR: "#bada55",
            }}
            bubblesConfig={BubblesConfig}
          />
        </div>
      </div>
    </div>
  );
};

export default MapView;

当前地图效果：

现寻求自定义地图上国家名称字体大小与样式的指导及相关代码示例。

内容的提问来源于stack exchange，提问作者Richard Branson