[英]styled-components not restyling a component
我在使用styled-components
對Gats中的組件進行“重新樣式化”時遇到了一些麻煩
"styled-components": "^3.3.0"
"gatsby-plugin-styled-components": "^2.0.11"
我的gatsby-config
有gatsby-plugin-styled-components
, gatsby-config
,當我再次通過styled()
放置自定義組件時,樣式可以在所有欄上使用:
我在這里有一個側邊欄
import React, { Component } from "react";
import styled from "styled-components";
class Aside extends Component {
render() {
return (
<Sidebar>
<List>
<Item>Pintrest 1</Item>
<Item>Pintrest 2</Item>
<Item>Pintrest 3</Item>
</List>
</Sidebar>
);
}
}
const Sidebar = styled.div`
position: absolute;
width: 200px;
left: calc(100% + 20px);
@media (max-width: 1200px) {
position: relative;
width: 100%;
left: 0;
top: 0;
}
`;
在一頁上,我希望樣式為top: 0;
所以我通過了
const SideBar = styled(Aside)`
top: 0;
`;
。
import React from 'react'
import Helmet from 'react-helmet'
import Link from 'gatsby-link'
import get from 'lodash/get'
import styled from "styled-components";
import Bio from '../components/Bio'
import Aside from '../components/Aside';
class BlogPostTemplate extends React.Component {
render() {
const post = this.props.data.markdownRemark
const siteTitle = get(this.props, 'data.site.siteMetadata.title')
const { previous, next } = this.props.pathContext
return (
<div>
<Helmet title={`${post.frontmatter.title} | ${siteTitle}`} />
<Bio />
<Post>
<h1>{post.frontmatter.title}</h1>
<SideBar/>
</Post>
</div>
)
}
}
甚至嘗試過
const aside = ({className}) => <Aside className={className}/>;
const SideBar = styled(aside)`
top: 0;
`;
如所示
https://www.styled-components.com/docs/basics#styling-any-components
但是它不起作用並且沒有更改樣式,這是lib gatsby-plugin-styled-components
或styled-components的限制,還是我誤解了styled-components
的目的
要像您鏈接的示例中那樣完成此操作,您將需要將className屬性傳遞給孩子,如下所示:
class Aside extends Component {
render() {
return (
<Sidebar className={this.props.className}>
<List>
<Item>Pintrest 1</Item>
<Item>Pintrest 2</Item>
<Item>Pintrest 3</Item>
</List>
</Sidebar>
);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.