Create new component and inherit styles from styled-component

Question

const Button = styled.button`
  display: inline-block;
  width: 300px;
  background-color: black;
`    

const ButtonHref = styled.a`
  ${Button}
`   

So I have two styled-components. I want to inherit 'Button' styles but create another tag. I use react-emotion. How can I do this?

Semolina

did the below answer your question? – Submaxillary

Answer 1

There are a few options here, using composition, styled components, or with props. The second option is probably what you want, but I've provided two other options as well.

1. Using composition

const baseButton = css`
  color: white;
  background-color: black;
`

const fancyButton = css`
  background-color: red;
`

render() {

  return (
    <div>
      <button css={baseButton}></button>
     <button css={[baseButton, fancyButton]}></button>
    </div>
  )
}

The second button will have the baseButton and specialButton styles.

Or...

const baseButton = css`
 color: white;
 background-color: black;
`

const fancyButton = css`
 ${baseButton};
 background-color: red;
`

render() {
 return (
   <div>
     <button css={baseButton}></button>
     <button css={fancyButton}></button>
   </div>
 )
}

2. Using styled components

const Button = styled.button`
  color: white;
  background-color: black;
`
const Fancy = styled(Button)`
  background-color: red;
`

render() {
  return (
    <div>
      <Button>Button</Button>
      <Fancy>Fancy</Fancy>
    </div>
  )
}

This works for any component that accepts the className prop, which button does.

3. Using props

  const Button = styled.button`
    color: white;
    background-color: ${props => props.fancy ? 'red' : 'black'};
  `

  render() {
    return (
      <div>
        <Button>Button</Button>
        <Button fancy>Fancy</Button>
      </div>
    )
  )

Submaxillary

I'm having the same issue, OP wants to inherit the styles of button and applied them to a, your solutions work only for the same tag. I'm wondering if you can compose the styles of different tags – Dehart

@Dehart I'm looking for the same, how did you overcome it? – Disinfection

@Disinfection You may want to look at the withComponent - styled-components.com – Submaxillary

@Disinfection I used the as prop – Dehart

@BrettDeWoody As of styled-components v4 the withComponent API is now a candidate for deprecation. as prop seems good. thank you guys. – Disinfection

Answer 2

If you just want an a that has the exact styles as your Button then you can do <Button as=“a” />

Sheen

that's the correct answer! your can even do <Button as={Anchor} /> where Anchor is another component. – Dehart

Answer 3

You could also add some custom css like this:

const ButtonBase = styled.button`
    // some css here
`

const SmallButtonCustom = `
    // some css here
`

const SmallButton = styled(ButtonBase)`
    ${SmallButtonCustom};
`

Gwin