页脚组件打破背景

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>
  );

You need to iterate on li tag not on entire footer if you need background color on root level.

页脚组件打破背景

Footer Component Breaking Background

css

rendering

reactjs