How to give different styles to mapped object elements?

Question

My main app view

import React from "react";

import Col from 'react-bootstrap/Col';
import Card from 'react-bootstrap/Card';


import "./Village.module.css";

const VillageItem = ({ label, fields, className }) => {
  return (
        <Col xs={12} sm={12} md={4} lg={4}>
          <Card style={{ width: '18rem' }}>
            <Card.Header className={className}><h5>{label}</h5></Card.Header>
              <Card.Body>
                <Card.Text>
                  {fields.map((field) => (
                    <p>{field}</p>
                  ))}
                </Card.Text>
              </Card.Body>
            </Card>
          </Col>
  );
};

export default VillageItem;

My Array file with className.

export default {
  0: {
    label: "Village 1 - Academia",
    fields: ["Research", "Publications", "Development"],
    className: "Academia"
  },
  1: {
    label: "Village 2 - Private",
    fields: ["Investment", "Partnership", "Advocacy"],
    className: "Private"
  },

  2: {
    label: "Village 3 - Public",
    fields: ["Governance", "Accountability", "Leadership"],
    className: "Public"
  },
};

File: While I called the functions.

import React from "react";
import VillageItem from "./VillageItem";
import villages from "./villages";
import styles from "./Village.module.css";

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';

const VillageList = () => {
  const villagesArray = Object.values(villages);
  return (
    <div className={styles.villageBody}>
      <h3 className={styles.villageHeading}>Description here...</h3>
      <p className={styles.villageInfo}>
          info here....
      </p>
      <Container className={styles.container}>
        <Row>
          {villagesArray.map((village) => (
            <VillageItem key={village.label} {...village} />
          ))}
        </Row>
      </Container>
    </div>
  );
};

export default VillageList;

I'm working with react.js and bootstrap for react. I wanted to style each items items separately, I added a className, but it worked but the styles were not working. What could be the cause? And CSS file is imported correctly. What else can stop it from displaying my stylesheet?

Also, is there any method for adding styles to each items in a map method?

Answer 1

If you are using CSS modules you have to import the file like so:

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

Then you have to actually use your classnames from your css file so:

<Card.Header className={styles[className] } ><h5>{label}</h5></Card.Header>

styles[className] is using the className from your array and tries to find it in your .module.css file. Make sure in your .module.css file you have the 3 classes defined e.g.:

.Private{
    color: red;
}
.Public{
    color: green;
}
.Academia{
    color: blue;
}

Then it works here at my project.