javascript 使用样式组件添加两个类（活动类）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48674607/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
adding two classes (active class) using styled-components
提问by peter flanagan
I am migrating from css to styled-components.
我正在从 css 迁移到styled-components.
My react component looks like the following:
我的反应组件如下所示：
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;
`;
and my css looks like this:
我的 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;
}
}
Does anyone know how I can add the active class/add two classes to an element using styled-components? Nothing is jumping out at me from the docs.
有谁知道如何使用 将活动类添加到元素中/将两个类添加到元素中styled-components？没有什么是从文档中跳出来的。
If anything is unclear or further information is required please let me know.
如果有任何不清楚或需要更多信息，请告诉我。
回答by treyhakanson
The template literals in styled components can access props:
样式组件中的模板字面量可以访问 props：
const Button = styled.button`
height: 60px;
width: 60px;
animation: ${
props => props.active ?
`${activeAnim} 0.5s linear` :
"none"
};
`;
...
<Button active={this.state.active} />
...
Reference here
参考这里
And to add the keyframes animation, you'll need to use the keyframesimport:
要添加关键帧动画，您需要使用keyframes导入：
import { keyframes } from "styled-components";
const activeAnim = keyframes`
0% {
background-color: transparent;
}
50% {
background-color: #fff;
}
100% {
background-color: transparent;
}
`;
Reference here
参考这里
回答by Chase DeAnda
You can extend the styleto overwrite certain properties and keep the others untouched:
您可以扩展样式以覆盖某些属性并保持其他属性不变：
render() {
// The main Button styles
const Button = styled.button`
height: 60px;
width: 60px;
`;
// We're extending Button with some extra styles
const ActiveButton = styled(Button)`
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>
)
}
回答by Akash
You need to pass additional classNamefrom props:
您需要className从道具中传递额外的信息：
Documentation for Styling Normal React Components
const StyledDiv = sytled.div`
&.active {
border: blue;
}
`
class Example extends React.Component {
constructor(props) {
super(props)
}
render() {
const isActive = true; // you can dynamically switch isActive between true and false
return (
<StyledDiv
className={`button ${isActive ? 'active': ''} ${this.props.className}`}
onClick={ this.pressNumber }
>
<Number>{ this.props.number }</Number>
</StyledDiv>
)
}
}
const Number = styled.div`
color: #fff;
font-size: 26px;
font-weight: 300;
`;
Good Luck...
祝你好运...
