Javascript 创建新组件并从已设置样式的组件继承样式

所以我有两个样式化的组件。我想继承“按钮”样式，但创建另一个标记。我用情感反应。我如何做到这一点？

这里有几个选项，使用合成、样式化组件或道具。第二个选项可能是您想要的，但我还提供了另外两个选项

1。使用构图

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

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

2。使用样式化组件

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

---

如果你只想要一个与你的

按钮

样式完全相同的

a

，那么你可以做

下面的答案回答了你的问题吗？我也有同样的问题，OP想要继承

按钮

的样式并将它们应用到

a

，你的解决方案只对同一个标签有效。我想知道你是否能写出不同的风格tags@Raftel我也在寻找同样的东西，你是如何克服它的？@BluePie你可能想看看

with component

-@BluePie我用的是@BrettDeWoody。看起来不错。谢谢你们，这是正确的答案！您甚至可以执行

，其中

锚定

是另一个组件。

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

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

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

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