Как передать модульные стили через props'ы? React

Question

Есть компонента:

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;

Я передаю styleTitle через props'ы с родительской компоненты:

<SectionsTitle styleTitle='s.SectionsTitle' />

Можно ли как-то передать этот s.SectionsTitle через props'ы?

Если я делаю таким образом то у меня не получается

Answer 1

Общая идея такая:

// компонент родитель
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

БЛОГ НА HUSL

Как передать модульные стили через props'ы? React

Ответы (1 шт):