Javascript 使用类名根据props值使用CSS动态设置组件样式

我正在创建一组可重用组件（包装材料ui），这些组件正在使用CSS进行样式化。我需要通过传递到自定义按钮的道具动态设置组件的宽度

我想使用类名来合并为MyButton定义的const root样式（我在沙箱中已经去掉了它，但它设置了颜色、图标等）和可以根据传入的道具定义的dynamic sizeStyle

  const sizeStyle: JSON =  { minWidth: "300px !important"};


  //always apply the buttonstyle, only apply the size style if a width prop has been supplied
  const rootStyle: Object = classNames({
    buttonStyle: true,
    sizeStyle: props.width
  ///});   

我不明白为什么该样式没有应用到页面上有道具通过的第一个按钮上——我可以在控制台上看到应该应用这两种样式

沙箱：

---

TIA

您需要将

props

传递给您的

useStyles（props）

函数，然后在此函数中您可以使用

props

类似于样式化组件

文件链接：

//eslint禁用下一行流类型/无弱类型
const useStyles=makeStyles({
根目录：{
//最小宽度：“300px！重要”，
颜色：#5656“，
背景色：“鲑鱼”，
边界半径：2，
textTransform:“无”，
方特家族：“Arial”，
尺寸：16，
字母间距：“89%”，//'0.09em'，
boxShadow：
“0px 1px 5px 0px rgba（0,0,0,0.2），0px 2px 0px rgba（0,0,0,0.14），0px 3px 1px-2px rgba（0,0,0,0.12）”，
“&：禁用”：{
颜色：#5656“，
不透明度：0.3，
背景颜色：“fbb900”
},
minWidth:props=>`${props.width}px`，
},
标签：{
textTransform:“大写”，
显示：“flex”，
空白：“nowrap”
}
});
//eslint禁用下一行流类型/要求返回类型
功能按钮（道具）{
const{children，…others}=道具；
常量类=使用样式（道具）；
返回(
{儿童}
);
}

您需要将

props

传递给您的

useStyles（props）

函数，然后在此函数中您可以使用

props

类似于样式化组件

文件链接：

//eslint禁用下一行流类型/无弱类型
const useStyles=makeStyles({
根目录：{
//最小宽度：“300px！重要”，
颜色：#5656“，
背景色：“鲑鱼”，
边界半径：2，
textTransform:“无”，
方特家族：“Arial”，
尺寸：16，
字母间距：“89%”，//'0.09em'，
boxShadow：
“0px 1px 5px 0px rgba（0,0,0,0.2），0px 2px 0px rgba（0,0,0,0.14），0px 3px 1px-2px rgba（0,0,0,0.12）”，
“&：禁用”：{
颜色：#5656“，
不透明度：0.3，
背景颜色：“fbb900”
},
minWidth:props=>`${props.width}px`，
},
标签：{
textTransform:“大写”，
显示：“flex”，
空白：“nowrap”
}
});
//eslint禁用下一行流类型/要求返回类型
功能按钮（道具）{
const{children，…others}=道具；
常量类=使用样式（道具）；
返回(
{儿童}
);
}

太棒了，这很有魅力。还有一个很好的干净的解决方案。谢谢。欢迎您，事实上，我从来没有像您那样通过向

类传递样式来直接覆盖MUI类，我也从您那里学到了一些新东西。几个月来，我只使用className={cx（{…}}}太棒了，这很有魅力。这是一个很好的干净的解决方案。谢谢。欢迎你，实际上我从来没有像你那样通过向
类传递样式来直接覆盖MUI类，我也从你那里学到了一些新东西。几个月来，我只使用className={cx（{…}