Reactjs 如何在材质UI makeStyles中应用字体功能设置并通过道具动态更改背景颜色

我试图在材质Ui makestyles React JS中添加字体功能设置：“pnum”on、“lnum”on，但它给了我一个名为意外标记的错误，以及如何传递背景色道具来动态更改，下面是我的代码

const useStyles=makeStyles({
    root:{
        backgroundColor: '#F8B817',
        '&:hover': {
            backgroundColor: "#F8B817",
         },
        width:'163px',
        height:'50px',
        borderRadius:'4px',
        fontFamily: 'Manrope',
fontStyle: 'normal',
fontWeight: 'bold',
fontSize: '12px',
lineHeight: '170%',
fontFeatureSettings: 'pnum' on, 'lnum' on;
        
    },
    

})

这里是物料界面的按钮

 <Button  className={classes.root} disableRipple><p>{buttonText}</p></Button>

{buttonext}

这是我要传递的buttonText道具

  <Link style={{ textDecoration: 'none' }} to='/Dashboard'><Button onClick={handleSetLogIn} buttonText='Get Started'></Button></Link>

---

我想你错过了报价单

import React from 'react';
import { Button, makeStyles } from '@material-ui/core';

const useStyles = (bgColor) =>
  makeStyles({
    root: {
      backgroundColor: bgColor,
      '&:hover': {
        backgroundColor: bgColor,
      },
      width: '163px',
      height: '50px',
      borderRadius: '4px',
      fontFamily: 'Manrope',
      fontStyle: 'normal',
      fontWeight: 'bold',
      fontSize: '12px',
      lineHeight: '170%',
      fontFeatureSettings: `'pnum' on, 'lnum' on`,
    },
  });

export const CustomButton = (props) => {
  const { buttonText, bgColor, ...rest } = props;
  const classes = useStyles(bgColor)();

  return (
    <Button {...rest} className={classes.root} disableRipple>
      <p>{buttonText}</p>
    </Button>
  );
};

从“React”导入React；
从“@material ui/core”导入{按钮，makeStyles}；
常量useStyles=（bgColor）=>
制作风格({
根目录：{
背景颜色：bgColor，
“&：悬停”：{
背景颜色：bgColor，
},
宽度：“163px”，
高度：'50px'，
边界半径：“4px”，
Fonthope家族：“人绳”，
fontStyle:'正常'，
fontWeight:'粗体'，
fontSize:'12px'，
线宽：“170%”，
fontFeatureSettings:“'pnum'打开，'lnum'打开”，
},
});
导出常量自定义按钮=（道具）=>{
const{buttonText，bgColor，…rest}=props；
常量类=使用样式（bgColor）（）；
返回(
{buttonText}

);
};

及

通过添加引用语，我们如何通过动态传递道具来改变它的背景颜色呢？@FerozAli I编辑了我的answer@lasanFernando上面的样式是默认的，是一个按钮组件，所以当我尝试导入其他组件中的其他地方时，根据要求按钮需要有不同的颜色，u编辑的是具有默认样式的按钮组件，我需要从其他组件传递道具，例如和按钮标签array@FerozAli如果你能给出一个有效的例子，我可以有一个look@FerozAli我更新了答案，可能会有帮助

<CustomButton buttonText={"Test"} bgColor={"red"} />