Почему при передаче класса пропсом, к нему не применяются стили?

Question

[D1ma5ta]

Почему стили для класса .photoshoper__slider_right не применяются в компоненте Photoshoper в моем React-приложении? Я использую CSS-модули для стилей и передаю класс photoshoper__slider_right в компонент Photoshoper, однако стили не применяются. Я убедился, что путь к файлу CSS указан правильно, и проверил наличие конфликтов стилей, но проблема все еще остается. Может быть, я что-то упускаю или делаю не так? Буду благодарен за любые подсказки или рекомендации по решению данной проблемы. Спасибо!

import React from "react";
import styles from "./photoshoper.module.css";
import { Slider } from "../slider/Slider";

export function Photoshoper(props) {
  return (
    <section className={styles.photoshoper}>
      <div className={`${props.info.sliderClass}`}>
        <Slider />
      </div>
      <div className={styles.photoshoper__description}>
        <h3 className={styles.photoshoper__title}>{props.info.title}</h3>
        <p className={styles.photoshoper__subtitle}>{props.info.subtitle}</p>
        <div className={styles.photoshoper__messageWrapper}>
          <img
            className={styles.photoshoper__imgArrow}
            src={props.info.imageSrc}
            alt=""
          />
          <span className={styles.photoshoper__messageTitle}>
            {props.info.messageTitle}
          </span>
        </div>
      </div>
    </section>
  );
}

import React, { useState } from "react";
import { Header } from "./components/header/Header";
import { Hero } from "./components/hero/Hero";
import { Photoshoper } from "./components/photoshoper/Photoshoper";
import { Slider } from "./components/slider/Slider";
import arrowImg from "./images/arrow.svg";

function App() {
  return (
    <div className="App">
      <Header />
      <Hero />
      <Photoshoper
        info={{
          title: "(It's me)",
          subtitle:
            "In difficult times, I always supported people. All cases I participated in are successful",
          imageSrc: arrowImg,
          messageTitle: "there are a lot of pictures",
        }}
      />
      <Photoshoper
        info={{
          title: "( I can do that )",
          subtitle:
            "Are you tired working with 2, 3 or 4 different teams? Conflicts, misunderstanding, too much time spent on communication are",
          imageSrc: arrowImg,
          messageTitle: "this is the perfect code",
          sliderClass: "photoshoper__slider_right",
        }}
      />
    </div>
  );
}

export default App;

Comments

[Lynn «Кофеман»]

Вангую что тут используются CSS-модули и классы превращаются в нечитаемый набор букв.
Что мешает просто посмотреть в браузере какой класс стоит у элемента?

[WbICHA]

Посмотри в девтулзах на итоговый хтмл и какие там классы у компонентов. Ответ найдёшь там же.

[Lynn «Кофеман»]

Полагаю в данном случае проще всего написать так:
<div className={styles[props.info.sliderClass]}>

[D1ma5ta]

Lynn «Кофеман», спасибо, помогло! До этого пробовал записывать так, но не работало.
<div className={styles.props.info.sliderClass}>