React开发FAQ页面如何为问答列表各条目设置差异化样式

方案1：通过索引绑定预设样式（无需修改原数据结构） #

你可以在遍历FAQ列表生成条目时，通过map方法的第二个参数获取当前条目的索引，为不同索引匹配不同的样式配置，示例代码如下：

// 预设不同索引对应的样式，可按需调整背景色、边框、字体等属性
const itemStyles = [
  { backgroundColor: "#f0f9ff", borderLeft: "4px solid #3b82f6" },
  { backgroundColor: "#f0fdf4", borderLeft: "4px solid #22c55e" },
  { backgroundColor: "#fffbeb", borderLeft: "4px solid #f59e0b" }
]

// 生成listFaq的逻辑
const listFaq = data.map((item, index) => (
  <div key={index} style={{
    padding: "15px 20px",
    borderRadius: "8px",
    marginBottom: "12px",
    // 匹配对应索引的样式，超出预设数量的条目默认复用样式循环
    ...itemStyles[index % itemStyles.length]
  }}>
    <div style={{ fontSize: "1.1em", fontWeight: 600, marginBottom: "8px" }}>
      {item.question}
    </div>
    <div style={{ color: "#4b5563" }}>
      {item.answer}
    </div>
  </div>
))

方案2：给数据条目新增样式配置字段（灵活度更高） #

如果需要每个条目有独立的定制样式，可以直接在原data数组里新增样式相关字段，遍历的时候直接读取即可：

// 修改后的data结构，新增style字段
const data = [
  {
    question: "Lorem ipsum dolor sit amet?",
    answer: "Tenetur ullam rerum ad iusto possimus sequi mollitia dolore sunt quam praesentium...",
    style: { bgColor: "#eff6ff", icon: wellbeingfaq, titleColor: "#1e40af" }
  },
  {
    question: "Dignissimos sequi architecto?",
    answer: "Aperiam ab atque incidunt dolores ullam est...",
    style: { bgColor: "#f0fdf4", icon: 自定义图标1, titleColor: "#166534" }
  },
  {
    question: "Voluptas praesentium facere?",
    answer: "Blanditiis aliquid adipisci quisquam reiciendis voluptates itaque.",
    style: { bgColor: "#fff7ed", icon: 自定义图标2, titleColor: "#9a3412" }
  }
];

// 生成列表时直接读取对应字段，适配你使用的Material UI组件
const listFaq = data.map((item, index) => (
  <Accordion 
    key={index}
    expanded={expanded === `panel${index}`} 
    onChange={handleChange(`panel${index}`)} 
    sx={{ 
      width: '100%', 
      padding: '30px',
      backgroundColor: item.style.bgColor
    }} 
    style={{ borderRadius: 20, margin:'10px 0px' }}
  >
    <AccordionSummary
      expandIcon={<ExpandMoreIcon />}
      aria-controls={`panel${index}bh-content`}
      id={`panel${index}bh-header`}
      sx={{ borderRadius:10 }}
    >
      <div style={{ display:'flex', flexDirection:'row', alignItems:'center' }}>
        <div> 
          <img src={item.style.icon} style={{ width:'auto', height:20, marginRight:25 }} alt="faq icon"/> 
        </div>
        <div style={{ fontSize:'1.5em', fontWeight:'bold', color: item.style.titleColor }}>
          {item.question}
        </div>
      </div>
    </AccordionSummary>
    <AccordionDetails>
      {item.answer}
    </AccordionDetails>
  </Accordion>
))

提示：如果你使用的是Material UI组件库，优先使用sx属性配置样式，相比内联style支持响应式断点、主题变量调用等能力，灵活度更高。

内容的提问来源于stack exchange，提问作者Daniel Döbereiner