React-Leaflet Popup을 커스텀 컴포넌트로 대체하는 방법?

Question

프로젝트에서 React-Leaflet 및 (callemall) Material-UI를 사용하고 있습니다. React-Leaflet의 <Popup></Popup> 구성 요소 내에 Material-UI Card 구성 요소를 렌더링하려고합니다. 난 팝업으로 구성 요소로 당겨 봤지만 팝업 그것이 ​​구성 요소가 작동해야하지 않습니다. 특히, 카드 구성 요소에는 버튼 요소가있어 확장되지만 유감스럽게도 팝업을 사용하면 클릭 할 수 없습니다. 재정의 할 필요가있는 CSS-y가 있다고 생각하지만, 내 생각에 더 쉬운 옵션은 팝업 구성 요소를 내 구성 요소로 교체하는 것이지만 어떻게 그렇게 할 것인지 잘 모르겠습니다. 어떤 통찰력을 많이 감사합니다 :)

내 코드는 다음과 같습니다

<Marker position={position}> 
    <Popup> 
     <MapPopup /> 
    </Popup> 
</Marker> 

를 가져온 구성 요소는 다음과 같습니다 (I는 간단 읽을 수 있도록하는 스타일과 중요하지 않은 세부 사항을 삭제했습니다)

<Card> 
    <CardHeader /> 
     <CardMedia 
      expandable={true} 
      overlay={ 
       <CardText expandable={true}> 
        <div> 
         <p>Text</p> 
         <Chip>text</Chip> 
        </div> 
        <div> 
         <p>Text</p> 
         <Chip>Text</Chip> 
        </div> 
       </CardText> 
      }> 
     <img src="cardMediaImageURL" /> 
    </CardMedia> 
</Card> 

Answer 1

React-Leaflet and Leaflet은 팝업의 정적 HTML을 렌더링하므로 동적 콘텐츠를 렌더링 할 수 없습니다. material-ui 구성 요소 렌더링은 가능하지만 대화 형이 아닙니다. 구성 요소를 <MuiThemeProvider></MuiThemeProvider>으로 감싸서이 작업을 수행 할 수 있습니다. 확장기와 같은 것이 아닌 전체보기로 설정된 컨텐츠를 가지고 있는지 확인해야합니다. 다음과 같이

해결 방법은 다음과 같습니다

<Popup> 
    <MuiThemeProvider muiTheme={getMuiTheme(yourThemeName)}> 
     <YourCustomComponent /> 
    </MuiThemeProvider> 
</Popup>