如何为映射的对象元素赋予不同的样式？

如何解决如何为映射的对象元素赋予不同的样式？

我的主应用程序视图

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;

具有 className 的我的Array文件。

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"
  },};

文件：当我调用函数时。

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;

我正在使用react.js和bootstrap进行反应。我想分别为每个项目设置样式，我添加了className，但是它起作用了，但是样式却不起作用。可能是什么原因？并且CSS文件已正确导入。还有什么可以阻止它显示我的样式表的？

还有，是否有任何方法可以在map方法中为每个项目添加样式？

解决方法

如果您正在使用CSS模块，则必须像这样导入文件：

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

然后，您必须实际使用css文件中的类名，以便：

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

styles[className]正在使用数组中的className并尝试在.module.css文件中找到它。确保在.module.css文件中定义了3个类，例如：

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

然后在我的项目中就可以使用了。