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

也许可以扩展按钮（如何？）或为每个按钮添加不同的组件更有意义？对于我的排版，我使用＆＃34;延伸＆＃34;。这样可行。这对于不同的按钮版本怎么样？有类似的方法吗？

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

这样做的好处是我们有一个按钮的主组件。现在我们可以扩展主人的各种风格。在我的情况下背景颜色。

在

的帮助下

export default Version2;

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

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

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

风格的组件/反应

1 个答案: