React Material UI-如何获取父组件的宽度/高度？

Question

我将React Material-UI与React Router配合使用，我想获取父组件的高度/宽度（以便可以设置理想的尺寸）。

一张图片胜过1000个单词：

我的组件：

import React from 'react'
import ReactPlayer from 'react-player'
import { useParams } from 'react-router-dom'

export default function Player(props) {
    const { playlistId } = useParams();
    const YOUTUBE_BASE_PLAYLIST_LINK = "https://www.youtube.com/playlist?list=";

    // how to get them ?
    const heigth = "320px";
    const width = "640px";

    return (
        <ReactPlayer
            controls={true}
            url={YOUTUBE_BASE_PLAYLIST_LINK + playlistId}
            playing={true}
            width={width}
            height={heigth}
        />
    )
}

我的路由器：

import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import { Provider } from 'react-redux'

import Home from "./components/Home/Home";
import Player from "./components/PlaylistPlayer/Player";
import {Container} from "@material-ui/core";
import basicStyle from "./components/Home/styles"

function Root({ store }) {

    const classes = basicStyle();

    return (
        <Provider store={store}>
            <Router>
                <Route
                    path="/"
                    render={(props) => <Home {...props} classes={classes} />}
                />
                <main className={classes.content}>
                    <div className={classes.toolbar} />
                    <Container>
                        <Route path="/playlists/:playlistId" component={Player} />
                    </Container>
                </main>
            </Router>
        </Provider>
    )
}

export default Root

达到目标的最佳/干净方法是什么？

感谢您的帮助