样式化的组件/反应

【问题标题】：styled components / react样式化的组件/反应
【发布时间】：2018-03-15 15:52:30
【问题描述】：

我正在研究一个我计划扩展的简单按钮示例。我添加了一个新按钮并包含了一些常量。到目前为止，一切都很好。如果我想使用更多按钮版本，例如同一按钮的版本 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};
  }
`;

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

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

【问题讨论】：

标签： javascript css reactjs styled-components

【解决方案1】：

当我添加了一个新组件时它正在工作。我将 PrimaryButton 导入到名为“Version2”的新定义组件中。

import PrimaryButton from './primary';

从这里我像这样更新了 PrimaryButton：

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

这样做的好处是我们有一个按钮的主组件。现在我们可以通过多种附加样式来扩展主控。在我的情况下背景颜色。

在

的帮助下

export default Version2;

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

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

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

【讨论】：