web-dev-qa-db-ja.com

スタイル付きコンポーネントを使用して2つのクラス（アクティブクラス）を追加する

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を使用して、アクティブクラスを要素に追加する/要素に2つのクラスを追加する方法を知っている人はいますか？ドキュメントから飛び出すものは何もありません。

不明な点がある場合、または追加情報が必要な場合はお知らせください。

javascriptcssreactjsstyled-components
8
peter flanagan

スタイル付きコンポーネントのテンプレートリテラルは、小道具にアクセスできます。

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

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

参照 ここ

キーフレームアニメーションを追加するには、keyframesインポートを使用する必要があります。

import { keyframes } from "styled-components";

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

参照 ここ

9
treyhakanson

スタイルを拡張する を使用して、特定のプロパティを上書きし、他のプロパティをそのままにすることができます。

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>
    )
}
2
Chase DeAnda