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

【问题标题】：How to give different styles to mapped object elements?如何为映射的对象元素赋予不同的样式？
【发布时间】：2020-10-28 14:30:55
【问题描述】：

我的主应用视图

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的我的数组文件。

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 和引导程序进行反应。我想分别为每个项目设置样式，我添加了一个类名，但它起作用了，但样式不起作用。可能是什么原因？并且 CSS 文件已正确导入。还有什么可以阻止它显示我的样式表？

另外，有没有什么方法可以在 map 方法中为每个项目添加样式？

【问题讨论】：

造型seems to work properly for me。您确定您的样式表已加载且有效吗？
@YevgenGorbunkov，感谢您的帮助。是的，我猜它是导入更正的。但是，我不知道为什么它不起作用。我尝试使用 Chrome Dev 进行检查。旧的，但是，根本没有添加样式。

标签： javascript reactjs react-bootstrap css-modules

【解决方案1】：

如果你使用 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;
}

然后它在我的项目中起作用。

【讨论】：

显示调用 VillageItem 和 css 的代码
我刚把它加进去了。