如何将常规嵌套css更改为样式化组件？

我有这个CSS样式，我想在react中更改为样式化组件：

.movie-page .movie-details {
  display: flex;
  flex-direction: column;
  max-width: 800px;
  margin: 20px auto 60px auto;
}

.movie-page .movie-details h1 {
  line-height: 1.5em;
}

.movie-page .movie-details h1 span {
  font-size: inherit;
  font-weight: normal;
  padding-left: 1rem;
  color: #bbb;
  line-height: inherit;
}

我有点困惑标签嵌套是如何工作的。我正在使用样式化组件进行此操作：

const MovieDetails = styled.div`
  display: flex;
  flex-direction: column;
  max-width: 800px;
  margin: 20px auto 60px auto;

  h1 {
    line-height: 1.5em;
  }

  h1 span {
    font-size: inherit;
    font-weight: normal;
    padding-left: 1rem;
    color: #bbb;
    line-height: inherit;
  }
`;

---

这个代码看起来正常吗？我的h1标签看起来像p标签

你应该可以这样选择。Bt您还可以执行以下操作，看起来更整洁：

const MovieDetailsHeader = styled.h1 `
   line-height: 1.5em;
   span {
        font-size: inherit;
        font-weight: normal;
        padding-left: 1rem;
        color: #bbb;
        line-height: inherit;
    }
`

---

谢谢你的提示。如果我没有将h1标记指定为

font-size:2em

，您知道为什么它会显示为p标记吗？请显示相应的代码。此外，如果你认为任何答案有帮助，别忘了投赞成票