我可以创建 class-based 个 React 风格的组件吗？

Question

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

功能性（有效）：

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>
    );
  }
}

Class-based（如果可以做这样的事情我会很感兴趣——不起作用……颜色没有应用到我的 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 传递给你希望具有样式组件 class 的 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 中看到这种模式的例子。希望对您有所帮助！

我可以创建 class-based 个 React 风格的组件吗？

Can I create class-based React Styled Components?

reactjs

styled-components