使用props作为带有makeStyles的CSS属性的值

Question

我正在寻找一种方法，以通过Material UI中的makeStyles使用从儿童道具中提取的特定值（ borderRadius ）到CSSproperty中。

但是我遇到了这个错误：

error's print

在父母上：

...
<Grid item xs={9}>
 <Grid container justify="flex-end">
  <MenuSideNavbar borderRadius={borderRadius}></MenuSideNavbar>
 </Grid>
</Grid>
...

在子上：

import React from "react";
import { Box } from "@material-ui/core";
import { makeStyles, createStyles } from "@material-ui/core/styles";

interface ComponentProps {
  borderRadius: string;
}

type Props = ComponentProps;

const useStyles = makeStyles(Theme =>
  createStyles({
    root: {
      borderTopRightRadius: ({ borderRadius }) => borderRadius,
      background: Theme.palette.secondary.main,
      width: "100%"
    },
    container: {}
  })
);

const MenuSideNavbar: React.FC<ComponentProps> = props => {
  const { borderRadius, ...other } = props;
  const classes = useStyles({ borderRadius });
  return (
    <Box className={classes.root}>
      <p>oi</p>
    </Box>
  );
};

export default MenuSideNavbar;