score:1

Accepted answer

in your app.tsx you can do the same:

  const bluebutton = styled(button)`
    background: blue;
  `

what styled-components does is it creates a class with background blue and pass it to your button. so in your button.tsx you need to accept the css class

export default function button({ classname, children }: ibutton) {
  const button = styled.button`
    padding: 1em;
    background: #ccc;
    border-radius: 5px;
  `

  return (
    <button classname={classname}>{children}</button
  )
}

edit another way to do is to export the style like this

const basestyles = css`
    padding: 1em;
    background: #ccc;
    border-radius: 5px;
`

const basebutton = styled.button`
    ${basestyles}
`

then later override the styles

 const bluebutton = styled.button`
    ${basestyles}
    background: blue;
  `

Related Query

More Query from same tag