如何将普通嵌套 css 更改为样式组件？

Question

我有这个 CSS 样式，我想在反应中更改为 styled-components:

.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;
}

我有点不明白标签嵌套是如何工作的。我正在使用 styled-components:

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 标签

Answer 1

你应该可以 select 那样。 Bt 你也可以像下面这样看起来更整洁：

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

如何将普通嵌套 css 更改为样式组件？

How to changed normal nested css to styled-components?

css

reactjs

styled-components