How do I pass modular styles through props? React

Question

How do I pass modular styles through props? React

There are components:

import React from 'react';
import s from './SectionsTitle.module.css';

const SectionsTitle = (props) => {        
    return <div className={props.styleTitle}>    
        {props.whiteFraction}<span{props.redFraction}</span>
    </div>
}
export default SectionsTitle;

I pass styleTitle via props from the parent component:

<SectionsTitle styleTitle='s.SectionsTitle' />

Is there any way to pass this s.SectionsTitle through props?

If I do it this way, I don't get

7

css reactjs jsx

Author: Vasily, 2020-09-06

Source

1 answers

score 4 · Answer 1

The general idea is this:

// компонент родитель
import React from "react"
import Child from "./path/to/Child"
import styles from "./Parent.module.css"

const Parent = () => {
  // --- правка по комментарию автора ---
  // console.log(styles.myClass)      
  // что бы убедиться что класс существует      
  return <Child myClass={styles.myClass} />
}

export default Parent

// компонент ребенок
import React from "react"

const Child = props => {
  return <div className={props.myClass}>I\'am the child component</div>
}

export default Child