使用样式组件添加两个类（活动类）答案

【问题标题】：adding two classes (active class) using styled-components使用样式组件添加两个类（活动类）
【发布时间】：2018-07-18 09:08:24
【问题描述】：

我正在从 css 迁移到 styled-components。

我的反应组件如下所示：

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 向一个元素添加活动类/添加两个类？文档中没有什么能引起我的注意。

如果有任何不清楚或需要更多信息，请告诉我。

【问题讨论】：

标签： javascript css reactjs styled-components

【解决方案1】：

您可以extend the style 覆盖某些属性并保持其他属性不变：

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>
    )
}

【讨论】：

不鼓励这样做，因为 v4 .extend 已被删除。
您可以使用styled(Button)`...` 来扩展现有的样式组件

【解决方案2】：

样式化组件中的模板字面量可以访问 props：

const Button = styled.button`
  height: 60px;
  width: 60px;
  animation: ${
      props => props.active ?
          `${activeAnim} 0.5s linear` :
          "none"
  };
`;

 ...
 <Button active={this.state.active} />
 ...

参考here

要添加关键帧动画，您需要使用 keyframes 导入：

import { keyframes } from "styled-components";

const activeAnim = keyframes`
    0%   {
        background-color: transparent;
    }
    50%  {
        background-color: #fff;
    }
    100%  {
        background-color: transparent;
    }
`;

参考here

【讨论】：

【解决方案3】：

你需要从 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;
`;

祝你好运……

【讨论】：