Question

我创建了一个子组件，该子组件在我的整个App中都在使用，我希望每次都赋予它不同的样式。我试图传递一个样式道具并动态地对其进行更改，但是由于我还使用了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>

反应子组件的动态样式

1 个答案: