Use third party component seems to be broken

Version

1.0.9

I can’t use the third party wrapper and get no styles on my rendered component:

import React from 'react';
import styled from 'styled-components';

class Nav extends React.Component {

    render() {

        return (
            <nav>
                <button info type="button">REGISTER</button>
                <button type="button">LOGIN</button>
            </nav>
        );

    }
}


let Nav2 = styled(Nav)`
  color: #222;
  border: 3px solid red;
  background: blue;
  font-size: 1.5em;
  font-family: Helvetica, Arial, sans-serif;
  text-align: center;
`;


export default Nav2;

Reproduction

http://www.webpackbin.com/EyvHTuK1f

Expected Behavior

Expect Nav border to be 3px solid and red and background blue

Actual Behavior

Nav use default styling

[mxstbr]

I did not want to continue the discussion as I was afraid to look too much like a noob

Let me tell you something @santaclauze – never ever be afraid to ask a question or say your opinion. As soon as you stop being curious, you stop learning. Always ask questions, figure out what you want to know, discuss with people!

Good luck with learning to code! 😊

[bhough]

@santaclauze You’re missing a small piece. If you look at the Third Party component part of the docs you will see a note about including a className on the “third-party” component you are styling in order for the class that is generated to be properly applied.

Here is an example: http://www.webpackbin.com/4JR5NCY1f