Header.js

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

const HeadingCSS = styled( Heading )`
    font-weight: 700;
   /* more styling */
`;

const StyledH1 = styled.h1`${ HeadingCSS }`;
const StyledH2 = styled.h2`${ HeadingCSS }`;
/* etc */

const Heading = ( {children, tag} ) => {
    switch ( tag ) {
        case 'h2':
            return (
                <StyledH2>
                    {children}
                </StyledH2>
            );
        case 'h1':
            return (
                <StyledH1>
                    {children}
                </StyledH1>
            );
    }
};

Heading.propTypes = {
    /**
     * The tag to use to render the elment
     */
    tag: PropTypes.oneOf( ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] ),
};

Heading.defaultProps = {
    tag: 'h1',
};

Heading.displayName = 'Heading';

export default ( Heading );