样式组件/反应

Question

我正在研究一个我打算扩展的简单按钮示例。我添加了一个新按钮并包含了一些常量。到目前为止，一切都很好。如果我想使用更多按钮版本，例如同一按钮的版本 1、版本 2、版本 3，并且某些样式已更改，例如背景颜色。我该怎么做？它们应该如何导出？

const PrimaryButton = styled.button`
  font: inherit;
  padding: 0.5em 1em;
  border: 1px solid;
  background-color: ${buttonBackgroundColor};
  color: ${buttonColor};
  border-radius: 0.25em;
  border-color: ${colors.blueLight};
  margin-right: 0.5em;
  cursor: pointer;
  outline:none;
  :hover {
    background-color: ${colors.blueLight};
  }
`;

也许可以扩展按钮（如何？）或者为每个按钮添加不同的组件是否更有意义？对于我的排版，我使用 "extend"。这样可行。对于不同的按钮版本会怎样？有没有类似的方法？

export const H1 = styled.h1`
  font-size: 30px;
  color: red;
`
export const H2 = H1.withComponent('h2').extend`
  font-size: 24px;
`

Answer 1

当我添加一个新组件时它正在工作。我将 PrimaryButton 导入到名为 "Version2".

的新定义组件中

import PrimaryButton from './primary';

我从这里更新了 PrimaryButton，如下所示：

const Version2 = PrimaryButton.extend`background-color: red;`

这样做的好处是我们有一个按钮的主组件。现在我们可以使用多种附加样式来扩展母版。就我而言 background-color.

在

的帮助下

export default Version2;

我们现在可以将这个名为 "Version2" 的按钮添加到我们的渲染函数中，例如：

<PrimaryButton>ClickMe!</PrimaryButton>
<Version2>ClickMe!</Version2>

现在我们得到了不同的按钮。而且它非常模块化和干净。

样式组件/反应

styled components / react

javascript

css

reactjs

styled-components