Can I create class-based React Styled Components?

Question

I just started looking into using Styled Components for a JavaScript React web application, and I'm wondering if it's possible to use class-based styled components. For example:

Functional (works):

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 (I would be interested if something like this could be done--does not work...color is not applied to my 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>
    );
  }
}

Is something like this possible?

Answer 1

Yes, it can be done, you just need to pass the className prop to the JSX element you wish to have the styled-component class, and actually you can pass any other props, since styled-components pass all the props down to its wrapped component.

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

you can see examples of this pattern in their docs. Hope it helps!