在使用中传递样式组件的值答案

【问题标题】：Pass value on styled-component within usage在使用中传递样式组件的值
【发布时间】：2017-11-17 01:47:36
【问题描述】：

我想让 Header（自己的组件）成为一个样式组件。但是我得到了

未捕获的类型错误： WEBPACK_IMPORTED_MODULE_4_styled_components.a.Header 不是函数

class Header extends Component {
    render() {
        return (
            <div className={this.props.className}>
                <NavBar>
                    <Nav>
                        <NavItem>Item1</NavItem>
                        <NavItem>Item2</NavItem>
                    </Nav>
                </NavBar>
            </div>
        );
    }
} 
export default Header;

所需用途：

const StyledHeader = styled.Header`
  background: ${props => props.background ||  'goldenrod'};
`;
class HomePage extends Component {
    render() {
        return(
            <StyledHeader background={"#d3d9df"}/>
            <Content />
        );
    }
}
export default HomePage;

我的方法是否正确？ 我只希望Header 每页的背景颜色不同。

【问题讨论】：

将颜色作为prop传递给标题组件，并使Header中的外部div成为样式组件。

标签： reactjs styled-components

【解决方案1】：

您可能想考虑使用 ThemeProvider，然后声明一个主题，然后在您的 mainApp 中提供它，然后您可以使用 () 语法扩展现有组件：

const StyledHeader = styled(Header)`
  background: ${{{ theme }} => theme.headerBg};
`;

如果您需要任何帮助，请随时联系我。

【讨论】：

这是唯一的方法吗？
你也可以使用<Header background={'#fff'}/> const StyledHeader = styled(Header) background: ${props => props.background}; ;

【解决方案2】：

Header.js

class HeaderUnstyled extends Component {
    render() {
        return (
            <div className={this.props.className}>
               ...
            </div>
        );
    }
} 

const Header = styled(HeaderUnstyled)`
  background: ${props => props.background || '#aab' };
  font-size: large;
  font-family: Beirut;
  padding: 5px;
`;

 export default Header;

HomePage.js

import Header from '..header/Header.js';

class HomePage extends Component {
    render() {
        return(
            <Header />
            <Content />
        );
    }
}
export default HomePage;

AboutPage.js

import Header from '..header/Header.js';

class AboutPage extends Component {
    render() {
        return(
            <Header background={'#fff'}/>
            <Content />
        );
    }
}
export default AboutPage;

这是我目前选择的方法。

【讨论】：