将 borderRadius 添加到 AnnotationLabel

Question

我正在使用带有 react-annotation 的 react-simple-maps。

现在我的 annotationsLabel 看起来是下面的第一张图片：

我想要做的是添加 borderRadius，使标签看起来像下图：

我已经阅读了react-annotation中的相关上下文docs，但是，我没有找到任何有关将borderRadius添加到注释标签的信息。

下面是相关代码，我将在其中进行必要的插入：

import {
    Marker, Annotation, AnnotationProps
  } from "react-simple-maps";
import AnnotationBadge from 'react-annotation/lib/Types/AnnotationBadge';
import {EditableAnnotation,ConnectorEndArrow, ConnectorCurve, Note, AnnotationLabel} from 'react-annotation'
const useStyles = makeStyles((theme) => ({
    root: {
        "&.MuiCard-root": {
          padding: theme.spacing(5),
          background: "#353839",
          borderRadius: theme.spacing(1),
          textAlign: "center",
          width: '80%',
          height: 600,
          marginLeft: 80,
          marginTop: 100
        },
        '& .annotation-note-bg': {
            fillOpacity: 1,
            fill: '#4F5152',
            borderRadius: 8

          },
      },
    }))
const geoUrl =
  "https://raw.githubusercontent.com/zcreativelabs/react-simple-maps/master/topojson-maps/world-110m.json";
const Map = () => {
    const classes = useStyles();
    const theme = useTheme();
    const multiLine2 = `1️⃣first
2️⃣second`;
    // const user = 'users';
    return(
    <Card className={classes.root}>
    <ComposableMap>
      <Geographies geography={geoUrl}>
        {({ geographies }) =>
          geographies.map(geo => 
          <Geography 
          fill={theme.palette.primary.main} 
          key={geo.rsmKey} 
          geography={geo} />)
        }
      </Geographies>
      {markers.map((item) => (
        <Marker key={item.id} coordinates={item.coordinates}>
          <AnnotationLabel
  color={"#fcf9fd"}
  className="show-bg" 
  editMode={true}
  
  note={{
      "title": item.users.toString(),
    "label": `${item.name}
    ${'users'}`,
    "align":"dynamic",
    "textAlign": "center",
    "orientation":"leftRight" ,
    "bgPadding":20,
    "padding":15,
    "titleColor":"#ffffff",
}}
    
/>


        </Marker>
      ))}
    </ComposableMap>
  </Card>
    );
  };
export default Map;

请查看下面我创建的沙盒 link。这将向您展示我所做的事情，我希望它能让您更好地了解正在发生的事情。

https://codesandbox.io/s/nice-austin-sco6gb?file=/src/App.js

Answer 1

这是一个 rect 元素。你需要给它 rx 属性来给它圆角。

将 borderRadius 添加到 AnnotationLabel

Add borderRadius to AnnotationLabel

annotations

reactjs

material-ui

react-simple-maps