Question

So sometimes I would group 2 selectors in the className at the same time like <div className="slectorA selectorB" /> which would render .selectorA .selectorB { (...) } in the CSS file if I am not mistaken.

I was wondering how to do that if I were to use a CSS module. Define styles = './App.module.css' then how would I do the same call as before? Here is an example of what I am trying to do in my code.

App.js

import styles from "./App.module.css";

const manageBackgroundImage = (temperature) => {
  if (temperature > 16) return "{styles.weather_box.warm}";
  else return "{styles.weather_box.cold}";
  //(...more else ifs here...)
};

export default function App() {
  const temperature = 17;

  return (
    <div>
      <div className={manageBackgroundImage(temperature)}></div>
    </div>
  );
}

App.module.css

.weather_box {
    display: grid;
    width: 40%;
    height: inherit;
}

.weather_box.cold {
    background-image: url('../../assets/cold.png');
    transition: 0.6s ease-out;
}

.weather_box.warm {
    background-image: url('../../assets/warm.png');
    transition: 0.6s ease-out;
}

Answer 1

App.js

import styles from "./App.module.css";
const manageBackgroundImage = (temperature) => {
  if (temperature > 16) return `${styles.weather_box} ${styles.warm}`;
  else return `${styles.weather_box} ${styles.cold}`;
};