为什么React组件JobList导入至不同父组件后CSS样式会发生变化？

• 你用到的MainContainer采用flex布局，未给子元素设置显式宽度、flex缩放规则时，子元素宽度会由自身内容宽度、兄弟元素的内容宽度共同决定。HomePage里引入的Main组件和JobDetailsMain里引入的JobDetails组件默认内容宽度/最小宽度规则不同，直接导致作为兄弟元素的JobList被挤压或拉伸。
• 你给JobList套的容器仅设置了margin-left: 0，没有限制宽度，flex布局下默认flex-shrink为1、flex-grow为0，若JobList内部内容宽度较大会直接撑开容器，甚至挤压旁边的JobDetails组件；如果JobDetails的flex-shrink设为0或者自身最小宽度很大，反过来也会挤压JobList。
• 可以额外排查HomePage的HomePage.css文件，确认是否存在你遗漏的针对JobList的样式规则。

1. 给JobList设置固定宽度+禁止缩放
   给JobList外层容器添加如下样式，宽度值替换为HomePage中JobList的实际渲染宽度即可：

const JobListContainer = styled.div`
  width: 320px;
  flex-shrink: 0;
  flex-grow: 0;
  margin-left: 0;
`

2. 给右侧内容区设置自适应规则
   给JobDetails外层新增容器，让它自动占满剩余宽度，避免内容溢出破坏布局：

const JobDetailsContainer = styled.div`
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 0;
  overflow-x: auto;
`

对应修改组件结构：

const JobDetailsMain = () => {
  return (
    <Container>
      <MainNavbar />
      <MainContainer>
        <JobListContainer>
          <JobList />
        </JobListContainer>
        <JobDetailsContainer>
          <JobDetails />
        </JobDetailsContainer>
      </MainContainer>
    </Container>
  )
}

3. 兜底校验：如果修改后效果仍和HomePage不一致，直接对比HomePage中Main组件的flex相关样式，将规则完全同步到JobDetailsContainer上即可。

内容的提问来源于stack exchange，提问作者Mohamed Rifaath