Je migre de CSS vers styled-components
.
Mon composant react ressemble à ceci:
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;
`;
et mon css ressemble à ceci:
.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;
}
}
Est-ce que quelqu'un sait comment ajouter la classe active/ajouter deux classes à un élément en utilisant styled-components
? Rien ne me saute des docs.
Si quelque chose n'est pas clair ou si des informations supplémentaires sont nécessaires, veuillez me le faire savoir.
Les littéraux de modèle dans les composants stylisés peuvent accéder aux accessoires:
const Button = styled.button`
height: 60px;
width: 60px;
animation: ${
props => props.active ?
`${activeAnim} 0.5s linear` :
"none"
};
`;
...
<Button active={this.state.active} />
...
Référence ici
Et pour ajouter l'animation d'images clés, vous devrez utiliser l'import keyframes
:
import { keyframes } from "styled-components";
const activeAnim = keyframes`
0% {
background-color: transparent;
}
50% {
background-color: #fff;
}
100% {
background-color: transparent;
}
`;
Référence ici
Vous pouvez étendre le style pour écraser certaines propriétés et garder les autres intactes:
render() {
// The main Button styles
const Button = styled.button`
height: 60px;
width: 60px;
`;
// We're extending Button with some extra styles
const ActiveButton = Button.extend`
animation-duration: 0.5s;
animation-name: highlightButton;
`;
const MyButton = this.state.active ? ActiveButton : Button;
return (
<MyButton onClick={this.pressNumber}>
<Number>{ this.props.number }</Number>
</MyButton>
)
}