Могу ли я создать компоненты на основе классов в стиле React?

Question

Я только начал изучать использование стилевых компонентов для веб-приложения JavaScript React, и мне интересно, возможно ли использовать стилевые компоненты на основе классов. Например:

Функциональный (работает):

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 в элемент JSX, для которого вы хотите иметь класс styled-component, и на самом деле вы можете передать любые другие реквизиты, так как styled-компоненты передают все реквизиты до его обернутого составная часть.

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!!'/>

Вы можете увидеть примеры этого шаблона в их документах. Надеюсь, поможет!