Как заменить React-Leaflet Popup пользовательским компонентом?

Question

Я использую React-Leaflet и (callemall)Material-UI в проекте. Я пытаюсь отобразить компонент Material-UI Card внутри <Popup></Popup> компонент React-Leaflet. Я пытался вставить его во всплывающее окно как компонент, но всплывающее окно не позволяет компоненту работать должным образом. В частности, компонент карты имеет элемент кнопки, который расширяет его, но, к сожалению, всплывающее окно не позволяет мне щелкнуть по нему. Я уверен, что есть кое-что CSS, что мне нужно переопределить, но я думаю, что проще было бы просто заменить всплывающий компонент своим собственным компонентом, но я не уверен, как это сделать. Любое понимание очень ценится:)

Мой код выглядит так:

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

И импортированный компонент выглядит так: (я удалил стили и неважные детали, чтобы их было проще читать)

<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 и Leaflet отображают статический html для всплывающего окна, поэтому в нем невозможно отобразить динамический контент. Рендеринг компонента Material-UI возможен, однако он не будет интерактивным. Вы можете сделать это, обернув ваш компонент <MuiThemeProvider></MuiThemeProvider>, Вы просто должны убедиться, что у вас есть контент, настроенный для полного представления, а не с чем-то вроде расширителя.

Решение заключается в следующем:

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