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

Question

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

Uncaught TypeError: WEBPACK_IMPORTED_MODULE_4_styled_components.a.Header is not a function

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 每页的背景颜色不同。

Answer 1

您可能想研究使用 ThemeProvider，然后您声明一个主题并在发生这种情况后在您的 mainApp 中提供它，例如您可以使用 () 语法扩展现有组件：

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

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

Answer 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;

这是我目前选择的方法。

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

Pass value on styled-component within usage

reactjs

styled-components