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?

did the below answer your question? – Brett DeWoody Jun 13 '19 at 11:55 — Brett DeWoody, Jun 13 '19 at 11:55

Brett DeWoody · Answer 1 · 2019-05-16T16:36:52.603

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>
    )
  )

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 — Raftel, Aug 11 '20 at 23:39
@BluePie You may want to look at the `withComponent` - https://www.styled-components.com/ — Brett DeWoody, Sep 13 '20 at 07:54
@BluePie I used the [`as` prop](https://emotion.sh/docs/styled#as-prop) — Raftel, Sep 13 '20 at 22:31
@BrettDeWoody [As of styled-components v4 the withComponent API is now a candidate for deprecation](https://styled-components.com/docs/api#withcomponent). [as prop](https://styled-components.com/docs/api#as-polymorphic-prop) seems good. thank you guys. — BluePie, Sep 15 '20 at 08:42

score 6 · Answer 2 · answered Sep 05 '20 at 05:34

6

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

answered Sep 05 '20 at 05:34

James

431
9
15

that's the correct answer! your can even do `` where `Anchor` is another component. – Raftel Sep 13 '20 at 22:34

score 0 · Answer 3 · answered Nov 25 '22 at 14:26

0

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};
`

answered Nov 25 '22 at 14:26

madfcat

74
1
9

Create new component and inherit styles from styled-component

3 Answers3

Linked