CODEWITHSUNDEEP
reactjs
Shira
Shira

Reputation: 424

React child component dynamic style

I've created a child component that I'm using all over my App and I want each time to give it a different style. I tried to pass a style prop and change it dynamically but since I'm also using React SCSS module style it's not working. Here is my parent component:

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>
   )
}

This is the child component:

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;

And the child component scss file looks like this:

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

How can I implement it so it will dynamically work with scss module?

Thanks

Upvotes: 1

Views: 508

Answers (1)

Dennis Vash
Dennis Vash

Reputation: 53924

Have you tried to use props.styleName as key-value for classes?

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

Upvotes: 1

Related Questions