页脚组件破坏背景

Question

我想为我的页脚组件设置黑色背景色。我现在遇到的问题是背景颜色现在只出现在“li 标签”文本上，而不是整个页脚。

以下是我的代码：

function Footer(props) {
  console.log(props);
  return props.array.map((elem) => {
    return (
      <footer style={{backgroundColor:"black",color:"blue"}}>
          <ul >
        <li style={{marginLeft:"5%"}}>{elem}</li>
    </ul>
      </footer>
    );
  });
}

我也尝试将“ul 标签”设置为背景颜色=黑色，但不会导致任何变化。

Answer 1

试试这个

 return (
    <footer style={{ backgroundColor: "black", color: "blue" }}>
      <ul>
        {props?.array?.map((elem, i) => (
          <li key={i} style={{ marginLeft: "5%" }}>{elem}</li>
        ))}
      </ul>
    </footer>
  );

如果您需要根级别的背景颜色，则需要迭代 li 标签而不是整个页脚。