我正在从css迁移到styled-components
。
我的react组件如下所示:
class Example extends React.Component {
........code here
render() {
return (
<div
className={ this.state.active ? "button active" : "button" }
onClick={ this.pressNumber }
>
<Number>{ this.props.number }</Number>
</div>
)
}
}
const Number = styled.div`
color: #fff;
font-size: 26px;
font-weight: 300;
`;
我的css代码如下:
.button {
height: 60px;
width: 60px;
}
.active {
animation-duration: 0.5s;
animation-name: highlightButton;
}
@keyframes highlightButton {
0% {
background-color: transparent;
}
50% {
background-color: #fff;
}
100% {
background-color: transparent;
}
}
有人知道如何使用styled-components
为一个元素添加活动类/添加两个类吗?文档中没有明显的提示。
如果有任何不清楚的地方或需要更多信息,请告诉我。
styled(Button)\
...``代替扩展现有的样式组件。 - Alp