如何在@react-google-map/api中为MarkerF应用CSS样式？

@react-google-map/api里的MarkerF组件无法直接通过常规CSS类（比如className）设置样式，因为它是Google Maps原生Marker的封装，渲染的是地图内部的DOM元素，而非普通React DOM节点。要调整它的样式，得通过组件提供的特定props：

1. 用style属性控制层级
   你给出的示例里设置zIndex是有效的，这个属性用来控制标记在地图上的堆叠顺序，数值越大，标记越显示在顶层：

<MarkerF style={{ zIndex: 5 }} position={center} />

2. 自定义标记外观（替换图标）
   如果要修改标记的外观（比如换掉默认的红色图标），得用icon属性而非CSS。你可以传入自定义图片路径，还能调整图标尺寸：

<MarkerF
  icon={{
    url: '/path/to/your-custom-marker.png',
    scaledSize: new window.google.maps.Size(40, 40) // 按需调整大小
  }}
  position={center}
/>

3. 额外注意

• 常规CSS样式（比如color、background）没法直接作用于MarkerF，必须通过Google Maps提供的Marker配置项调整。
• style属性仅支持部分符合Google Maps MarkerOptions的样式属性，除了zIndex，还能设置opacity这类属性：

<MarkerF
  style={{ zIndex: 5, opacity: 0.7 }}
  position={center}
/>

内容的提问来源于stack exchange，提问作者Dion Kim