[英]styled components / react
Im working on a simple button example which i plan to extend. 我正在研究一个我打算扩展的简单按钮示例。 I have added a new button and included some constants as well.
我添加了一个新按钮,还包括一些常量。 so far so good.
到现在为止还挺好。 In case i want to use more button versions like version1, version2, version3 of the same button with some styles changed like the background color.
如果我想使用更多按钮版本,例如同一按钮的version1,version2,version3,并且某些样式(例如背景颜色)已更改。 How should i do that?
我该怎么办? And how should they be exported?
以及如何将它们导出?
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};
}
`;
Maybe it is possible to extend the button (how?) or does it make more sense to add different components for each button? 也许可以扩展按钮(如何?),或者为每个按钮添加不同的组件是否更有意义? For my typography i have use "extend".
对于我的排版,我使用了“扩展”。 That works.
这样可行。 How would that be for the different button versions?
不同的按钮版本情况如何? Is there a similar way?
有没有类似的方法?
export const H1 = styled.h1`
font-size: 30px;
color: red;
`
export const H2 = H1.withComponent('h2').extend`
font-size: 24px;
`
It was working as i added a new component. 当我添加了新组件时,它正在工作。 I imported the PrimaryButton into the new defined component called "Version2".
我将PrimaryButton导入到新定义的名为“ Version2”的组件中。
import PrimaryButton from './primary';
From here i updated the PrimaryButton like this: 从这里我更新了PrimaryButton像这样:
const Version2 = PrimaryButton.extend`background-color: red;`
This has the advantage that we have a master component for a button. 这样做的好处是我们有一个按钮的主组件。 Now we are able to extend the master with diversity of additional styles.
现在,我们能够使用其他样式的多样性来扩展母版。 In my case background-color.
在我的情况下,背景色。
With the help of 在...的帮助下
export default Version2;
we are now able to add this button called "Version2" into our render function like: 现在,我们可以将名为“ Version2”的按钮添加到渲染函数中,如下所示:
<PrimaryButton>ClickMe!</PrimaryButton>
<Version2>ClickMe!</Version2>
and now we get the different buttons. 现在我们得到了不同的按钮。 And it´s very modular and clean as well.
而且它非常模块化且干净。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.