Styled Decorator

Could you add in the following code where appropriate:

styled.decorator = (strings, ...values) => (Component) => styled(Component)(strings, ...values);

So that we can begin using styled-components in the following way:

@styled.decorator`
    padding: 10px;
    background: blue;
    font-size: 12px;
`
export class SomeThing extends React.Component {
    render() {
        return <div className={this.props.className}>Hello World</div>;
    }
}

It would look much cleaner than writing:

class SomeThingComponent extends React.Component {
    render() {
        return <div className={this.props.className}>Hello World</div>;
    }
}

export const SomeThing = styled(SomeThingComponent)`
    padding: 10px;
    background: blue;
    font-size: 12px;
`

[mxstbr]

I don’t think we’re going to support this officially I’m afraid, for the reasons stated above. I’m not convinced this adds any value to the library, in fact I think it takes away from the value of using it.

[kitten]

It’s simply not possible and not supported, because it would allow users to easily go against or enforced best practices and methodologies.

By default we do offer passing in any component into the styled factory function, and that can be used as an escalation e hatch or even to make this possible with a helper, but it’s mainly for complex stacks of components and third party components.

It’s not recommended to use this frequently, as building up your component structures from bottom to top leads to cleaner architectures that scales. At the bottom you’ll find pure presentational components, above them structural ones, and at the top container/smart components. This can of course be nested and combined in different ways.

But by allowing this pattern by default, we’d be recommending to put the presentational components, like a stylesheet, at any position of this component stack, which is less desirable.

So if you really want to do this, we’re not stopping you. But try to keep this in mind, and we believe you’ll likely find more scalable styling code as a result.