Question

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

我可以做的一件事是

不是我想做的事的例子：

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 ) }样式，然后允许我扩展。这种解决方案的问题是，如果我决定添加更多按钮，则总是必须回到该文件，然后添加不同的变体，这可能会开始使该文件变得非常笨拙和混乱。

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

如何调整下面的代码来实现这一目标？

Button.tsx

<Button>

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

Answer 1

在App.tsx中，您可以执行以下操作：

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

styled-components的作用是创建一个背景为蓝色的类并将其传递给Button。因此，在Button.tsx中，您需要接受CSS类

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

从其他文件扩展样式化组件

1 个答案: