如何将普通的嵌套css改为样式化组件？
如何将普通的嵌套css改为样式化组件？
提问于 2018-07-08 16:34:30
我有一个想在react中更改为styled-components的CSS样式：
.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标记
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-09 01:41:08
您应该能够像这样选择。你也可以这样做，这样看起来会更整洁：
const MovieDetailsHeader = styled.h1 `
line-height: 1.5em;
span {
font-size: inherit;
font-weight: normal;
padding-left: 1rem;
color: #bbb;
line-height: inherit;
}
`页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51230179
复制相关文章
相似问题