React子组件动态样式

Question

我已经创建了一个子组件，我在我的应用程序中使用它，我希望每次都给它一个不同的样式。我试图传递一个样式属性并动态更改它，但由于我也使用了React SCSS模块样式，所以它不起作用。下面是我的父组件：

import Widget from "../Widget";

const Cost = (props) => {
  const renderPage = () => {
    return (
      <div className={classes.pageContainer}>
        <Widget title={"title"} subTitle={"subTitle"} styleName={"**cost-style-widget**"}/>
      </div>
    );
  };
  return(
    <div className={classes.costDril}>{renderPage()}</div>
   )
}

这是子组件：

import React from "react";
import classes from "./Widget.module.scss";

const Widget = ({ title, subTitle, **styleName** }) => {
  return (
    <div className={classes.staticWid}>
      <div className=**{classes.styleName}**>{title}</div>
      <div>{subTitle}</div>
    </div>
  );
};
export default StaticSingleWidget;

子组件scss文件如下所示：

.staticWid {
.cost-style-widget{
    background-color: red;
   }
}

我如何实现它才能与scss模块一起动态工作？

谢谢

Answer 1

您是否尝试过使用props.styleName作为classes的键值

<div className={classes.staticWid}>
  <div className={classes[props.styleName]}>{title}</div>
  <div>{subTitle}</div>
</div>