How to use styled-components in React? - reactjs

Question

Please forgive my confusion and newbiness. I'm trying to export a styled Button. Totally dazed and confused. Please help. I don't really want to export 2 buttons, as shown, but a single Button with the styles from the props, and the given styles as the default, I think :(
import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import styled, { css } from 'styled-components'
export default class Button extends React.Component {
btn: Btn = (props) => {
styled.button`
border-radius: 3px;
padding: 0.25em 1em;
margin: 0 1em;
background: transparent;
color: palevioletred;
border: 2px solid palevioletred;
${props => props.primary && css`
background: palevioletred;
color: white;
`}
`
}
render(
<Btn>Normal Button</Btn>
<Btn primary>Primary Button</Btn>
)
}
And my App element in case it's relevant
import React, { Component } from 'react'
import 'containers/App.css'
import Button from 'components/Button'
export default class App extends Component {
render() {
return (
<div>
<p>
<Button primary="primary" label="Button Help" />
</p>
</div>
)
}
}

Answer 1

Define your Styled Button as follows
import React from 'react';
import styled, {css} from 'react-emotion';
const StyledButton = styled('button')`
border-radius: 3px;
padding: 0.25em 1em;
margin: 0 1em;
background: transparent;
color: palevioletred;
border: 2px solid palevioletred;
`;
const primary = css`
background: black;
color: white;
`;
export default class Button extends React.Component {
render() {
return (
<div>
<StyledButton className={this.props.primary && `${primary}`}>
{this.props.label}
</StyledButton>
</div>
);
}
}
and in app element use buttton as follows
import React, { Component } from 'react'
import 'containers/App.css'
import Button from 'components/Button'
export default class App extends Component {
render() {
return (
<div>
<p>
<Button label="Button Help" /> // for normal Styled Button
<Button primary label="Button Primary" /> // for Primary Styled Button
</p>
</div>
)
}
}