「反応」反応におけるSCSS/Til 54の使用

16899 ワード
React CSS TIL テキストリンク
ReactでのScssの使用
  • 本明細書のすべての例は、SCSSを使用して記述される.

    Reactでのスタイルの変更


    html要素のスタイルを変更する方法はいくつかありますが、スタイル要素を直接行またはファイルに書き込むよりも、cssファイルを作成して接続して使用する方法が一般的です.
    反応も同じですが、方法は少し違います

    スタイルファイルに関連付ける


    reactはjsファイルなのでhtmlとは異なり、importを使用して対応するcssファイルを接続します.import 'css파일 path'

    className


    htmlでcssファイルのコレクタにアクセスする方法は次のとおりです.class='클래스 이름'ただし、reactを使用する場合、jsにはclassという名前の保持語が既に存在するため、classNameを使用してアクセスする必要があります(同様に、jsはclass-nameのような名前を使用しません)

    実際の応用


    では、上記の内容に基づいて、実際のプロジェクトに適用します.
    // App.js

import React from 'react';
import Button from './Button';
import './App.scss';

class App extends React.Component {
  render() {
    return (
      <main>
        <Button />
      </main>
    );
  }
}

export default App;

// button.js

import React from 'react';
import './Button.scss';

class Button extends React.Component {
  render() {
    return (
      <button className="button">
        버튼
      </button>
    );
  }
}

export default Button;

    
// App.scss
main {
  text-align: center;
}

// button.scss

.button {
  width: 100px;
  height: 30px;
  color: white;
  background-color: tomato;
}
    App、Button構成部品、scssファイルを作成します.
    <button className="button">버튼</button>
    に示すように、classNameでスタイリングしました

    じょうけんせいけい


    上のボタンをスイッチとして使い、スイッチの状態によって背景色を変えたい場合は、条件付きの造形が必要です.
    ただし、前例のように固定値が与えられると、条件付き造形はできない
    したがって、classNameに変数を割り当てる必要があります.
    // onClick 이벤트를 통해 className의 배경색을 변경해보자
// button.js

import React from 'react';
import './Button.scss';

class Button extends React.Component {
  constructor() {
    super();
    this.state = {
      btnState: 'on',
    };
  }

  handleBtn = () => {
    this.state.btnState === 'on'
      ? this.setState({
          btnState: 'off',
        })
      : this.setState({
          btnState: 'on',
        });
  };

  render() {
    console.log(this.state.btnState);
    return (
      <button className={`Button ${this.state.btnState}`} onClick={this.handleBtn}>
        버튼
      </button>
    );
  }
}

export default Button;

    
// button.scss
.Button {
  width: 100px;
  height: 30px;
  color: white;

  &.on {
    background-color: tomato;
  }

  &.off {
    background-color: teal;
  }
}


    上のようにボタンを押すと背景の色が変わります.
    scssファイルの&は親を意味します
    したがって、.Button.on .Button.offと言えば.少なくなければ適用されません

    クラス名ライブラリ


    上記テンプレートライブラリは使用できますが、classnameというライブラリを使用すると条件造形がより容易に行えますnpm install classnames 
    <button className={classNames('Button', this.state.btnState)} onClick={this.handleBtn}>
    classNames('Button', this.state.btnState)と併用可能
    必ず使いますか?🤔
    テンプレート・ライブラリの場合、プロパティがコレクタに変換されると、すべての文字列がチェックされるため、オフセットの前に一貫性を保つ必要があります.
    したがって,このライブラリを使用するとよりよいように見えるが,通常のようにプロジェクト,チームメンバーの使用状況に応じて決定すべきであると考える.
    複数)SCSS変数の使用
    cssでは変数も使用できますが、scssでは変数を宣言して使用するのが簡単です.
    $onColor: tomato;
$offColor: teal;

.Button {
  width: 100px;
  height: 30px;
  color: white;

  &.on {
    background-color: $onColor;
  }

  &.off {
    background-color: $offColor;
  }
}
    宣言変数は$변수이름 : 값;で、$변수이름として使用できます.
    現在は1つの場合にのみ使用されている色が変数として使用されているため、役に立たないように見えますが、この色がプロジェクトでよく使用される色であれば、最もbasicColor: #2d9a6d;のように宣言して複数の場所で使用されます.
    (共通cssフォルダに入れて使用することもできます)
    変数としてではなく多くの場所で使用される場合は、#2d9a6dの値を覚えておく必要があります.書くたびに使用します.
    Mixin
    重複するコードがあり、条件に応じてscssで異なるスタイルを実現したい場合はmixinを使用します.
    @mixin 이름(인자) {
    내용
}

.Button {
    @include mixin이름(전달할 값);
}
위와 같이 사용하면 중복코드를 제거하고 전달할 값에 따라 다른 스타일링이 가능하다
심지어 조건문도 작성이 가능하기 때문에 마치 프로그래밍 언어처럼 사용할 수 있다
@if 조건1 {
  내용
} @else if 조건2 {
  내용
} @else {
  내용
}
  • 超現代反応
    classnames,mixinの詳細な使用例
    • ≪タイプ・スクリプトの基礎｜Type Script Base｜Eas≫-変数と関数のタイプを定義します
    TIL no.14-JS矢印関数(矢印関数)