我可以创建基于类的 React 样式组件吗？

Question

我刚开始研究将样式化组件用于 JavaScript React Web 应用程序，我想知道是否可以使用基于类的样式化组件。例如：

功能性（作品）：

import styled from 'styled-components';

const Header = styled.header`
    color: blue;
`;

export default Header;

.
.
.

(in another file)
import React, {Component} from 'react';
import Header from './Header';

class App extends Component {
  render() {
    return (
        <Header>
          This is my header.
        </Header>
    );
  }
}

基于类（如果可以完成这样的事情，我会很感兴趣--不起作用...颜色未应用于我的标题）：

import React, {Component} from 'react';
import styled from 'styled-components';

class Header extends Component {
    render() {
        return (
            <header>
                Hi there. Test.
            </header>
    )};
}

export default styled(Header)`
  color: blue;
`;

.
.
.

(in another file)
import React, {Component} from 'react';
import Header from './Header';

class App extends Component {
  render() {
    return (
        </Header>
    );
  }
}

这样的事情可能吗？

Answer 1

是的，可以做到，你只需要将 className prop 传递给你希望拥有 styled-component 类的 JSX 元素，实际上你可以传递任何其他 props，因为 styled-components 传递了所有的 props到它的包装组件。

import React, {Component} from 'react';
import styled from 'styled-components';

    class Header extends Component {
        render() {
            return (
                <header className={this.props.className}>
                    Hi there here is another prop {this.props.anotherProp}
                </header>
        )};
    }

    export const StyledHeader styled(Header)`
      color: blue;
    `;

   // you can pass other props down to Header
   <StyledHeader
     anotherProp='testing!!'/>

您可以在他们的docs 中看到这种模式的示例。希望对您有所帮助！