styledComponentを使ってみた

styledComponentの活用メモ

//hocみたいに使う時 {css} がいる
import styled, { css } from "styled-components";

//props.active active={this.displayingDashboard()}ここの条件が実行されたら${props=>}が走る
const ControlButton = styled.div`
  color: red;
  ${props =>
    props.active &&
    css`
      text-shadow: 0px 0px 60px #03ff03;
      colore: blue;
    `};
`;

class App extends Component {
  state = {
    page: "dashboard"
  };

  //stateのpageがdashboardであれば[ControlButton]が実行される
  displayingDashboard = () => this.state.page === "dashboard";

  render() {
    return (
      <AppLayout>
        <Bar>
          <Logo>CryptoDash</Logo>
          <div />
          //activeで関数が実行↑
          <ControlButton active={this.displayingDashboard()}>
            Dashboard
      //抜粋

なんか人のコードをみて触っていた時に、verが変わったタイミングだったのかさだかではないが、「あれ、これいけへんやん」って思った時に公式サイトみたら書いてたのでメモ

個人的メモ

styledComponentめっちゃ便利ですが、やはり何をするにしても公式サイトみないとですね、、、、、
はい、実力不足です、、見るようにしましょう。自ら反省して戒めのようにここに書きたいと思います。