根据子项

Question

我正在使用Google Maps API在地图上显示添加到应用数据库中的内容。我正在使用"google-map-react": "^0.25.0"与Google Maps API进行互动。我正在使用React渲染地图元素。

import React, { Component } from 'react'

import './renderMap.css'

export default class BathoomMarker extends Component {
  render() {
    let bathroomMarker_Name_Open = this.props.$hover ? 'bathroomMarker--name' : 'bathroomMarker--name__closed'

    return (
      <div className='bathroomMarker'>
        <div className='bathroomMarker--img'></div>
        <div className={bathroomMarker_Name_Open}>{ this.props.name }</div>
      </div>
    )
  }
}

.bathroomMarker {
  background: rgba(0,0,0,0.75);
  padding: 10px;
  width: 120px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.bathroomMarker--img {
  background-image: url('./toilet.png');
  background-size: 20px;
  width: 20px;
  height: 20px;
}

.bathroomMarker--name {
  color: #fff;
  font-weight: bold;
  margin: auto;
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

问题是，bathRoomMarker在具有声明的width: 0;的匿名div中呈现。因此，bathRoomMarker必须声明宽度。

我正在寻找一种根据儿童的大小动态设置bathRoomMarker宽度的方法。

有办法吗？