从不同的文件扩展样式组件

Question

我想要实现的是在不同文件中使用此组件时能够向我的 Button.tsx 添加额外的样式（本质上是扩展样式）。正如您在我的 Button.tsx 中看到的那样，我已经定义了一些我希望按钮具有的默认样式，但是当我在我的应用程序中使用更多按钮时，我可能想要更改 background 或 color，等等

我能做的一件事是：

不是我想做的例子：

import React from 'react'
import styled from 'styled-components'

interface IButton = {
  children: string
}

export default function Button({ children }: IButton) {
  const Button = styled.button`
    padding: 1em;
    background: #ccc;
    border-radius: 5px;
  `
  const RedButton = styled(Button)`
    // Inherits all of the styles from Button.
    background: red;
  `

  return (
    <Button>{children}</Button
  )
}

此示例将继承我的 Button 样式，然后允许我进行扩展。这个解决方案的问题是，如果我决定添加更多按钮，我将总是不得不返回到这个文件，然后添加不同的变体，这可能会开始使这个文件变得非常笨拙和混乱。

理想情况下，我想从 App.tsx 文件或我正在使用我的 <Button> 的任何文件中扩展我的 <Button>。

我如何调整下面的代码来实现这一点？

Button.tsx

import React from 'react'
import styled from 'styled-components'

interface IButton = {
  children: string
}

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

  return (
    <Button>{children}</Button
  )
}

App.tsx

import React from 'react'
import styled from 'styled-components'

export default function App() {
  return (
    {/* This button would render with the default styles from Button.tsx */}
    <Button>Button One</Button>
    {/* This button would render with extended styles, a blue background for example */}
    <Button>Button Two</Button>
  )
}

Answer 1

在您的 App.tsx 中，您也可以这样做：

  const BlueButton = styled(Button)`
    background: blue;
  `

styled-components 的作用是创建一个背景为蓝色的 class 并将其传递给您的 Button。所以在你的 Button.tsx 你需要接受 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
  )
}

编辑另一种方法是像这样导出样式

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

const BaseButton = styled.button`
    ${BaseStyles}
`

然后稍后覆盖样式

 const BlueButton = styled.button`
    ${BaseStyles}
    background: blue;
  `

从不同的文件扩展样式组件

Extend a Styled Component from a different file

typescript

reactjs

styled-components

css-in-js