styled-components

タグテンプレート共通

backticで作成した文字列→スタイル情報の入力方法

CSSモジュール学習時の一般テンプレートと異なる点:テンプレートにJSオブジェクトまたは関数を渡す場合온전히 추출可能

`hello {{foo: 'bar' }} ${() => 'world'}!`
// 결과 : "hello [object Object] () => 'world'!"

テンプレートにオブジェクトまたは関数を配置するとシェイプが失われます

対象は→[object Object]

関数は関数内容を直接文字列化

function tagged(...args) {
  console.log(args);
}

tagged`hello ${{foo: 'bar' }} ${() => 'world'}!`

コードを確認します.

マークされたスタンプテンプレート文字を使用すると、テンプレート間に入るJavaScriptオブジェクトまたは関数の元の値を上記のように抽出できます.
styled-componsesこれらのプロパティを使用すると、→styled-componsesで作成した構成部品のpropsがスタイルの面でクエリーしやすくなります.

styled.ラベル名

import styled from 'styled-components';

const MyComponent = styled.div`
  font-size: 2rem;
`;

こんな風にdivの後にTagged Tampletteral構文でスタイルを追加します.
スタイルを適用したdivからなるリトラクト構成部品が作成されます
divではなくbuttonまたはinputでスタイリングしたい場合はstyled.を選択します.Inputのような形で後ろにサインを付けてください

styled(「ラベル名」)|styled(構成部品名)

使用するラベル名は、動的でもよいし、
特定の構成部品自体をモデリングするために使用

タグタイプをstyled関数に渡すパラメータ

const MuInput = styled('input')`
  background: gray;
`

styled関数のパラメータを素子形式で付与

const StyledLink = styled(Link)`
  color: blue;
`

このようにして素子をstyledのパラメータとする.
このコンポーネントには、classNameplsを最上位DOMに設定するclassName値を内部に含める必要があります.

const Samplr = ({ className }) => {
  return <div className={className}>Sample</div>;
};

const StyledSample = styled(Sample)`
  font-size: 2rem;
`;

スタイルでpropsをクエリーする

styled-componsesを使用すると、スタイル端にショートカットリンクを作成して、構成部品に渡されるprops値を参照できます.

参照

・복제コピーファイル참조シンボルリンクやショートカットの作成に似ている

シンボリックリンクで作成したファイルには元のファイルのアドレス値が含まれており、誰かがシンボリックリンク→コンピュータにアクセスしている場合は심볼릭 링크에 저장된 원본의 주소를 참조シンボリックリンクで元のファイルの場所を特定し、元のファイルを操作する

言い換えればオリジナルではなくオリジナルを参照
これにより、ストレージ容量を節約し、元のファイルのすべてのコピーを同じ内容に保つことができます

参照は電子化の世界の極致といえる.

const Box = styled.div`
  background: ${props => props.color || 'blue'};
  padding: 1rem;
  display: flex;
`;

<Box color="black"></Box>

上のコードのように、propsで直接あなたの価値を伝えることができます.
バックグラウンドでpropsをクエリーするcolorの値を使用
また、色値が与えられていない場合は、基本的に青色に設定する

propsベースの条件付き造形

通常CSS系で条件造形を行う場合はclassNameで条件造形を行う

styled-コンポーネントはpropsで簡単に条件造形を処理できる

単純変数ではなく複数行スタイル構文を設定する必要がある場合はcssをロードする

・&:hover利用可能&文字による自己選択

import styled, { css } from 'styled-components';

const Button = styled.button`
  background: white;
  color: black;
  border-radius: 4px;
  (코드생략)

  &:hover {
    background: rgba(255, 255, 255, 0.9);
}

  ${props =>
    props.inverted &&
      css`
        background: none;
        border: 2px solid whitel
        color: white;
        &:hover {
          background: white;
          color: black;
        }
  `};

  & + button {
    margin-left: 1rem;
}
`;

<Button>안녕하세요</Button>
<Button inverted={true}>테두리만</Button>

反応器からpropsを伝送する2つの方法

普通のテキストを伝える:「引用符」を使う

<제목 색상="blue"></제목>

変数またはデータ転送:{}大かっこ使用

<제목 색상={'red'}></제목>

マルチラインスタイルコードをpropsに従って挿入する場合は、styled-componsesにcssをロードする必要があります.

${props =>
    props.inverted &&
      css`
        background: none;
        border: 2px solid whitel
        color: white;
        &:hover {
          background: white;
          color: black;
        }
  `};

cssを使わずに文字列を直接入れても正常に動作します.

この内容は文字列としてしか扱われていないためvs code拡張プログラムで文法を正しく強調表示できない

Tagged Tampletteralではないため、関数を受信・使用できないため、この部分ではprops値は使用できない

複数行コードでpropsを参照しない場合、cssを呼び出す必要はなく、propsを参照する限りcssで包む必要があり、タグテンプレートを使用する

${props =>
  props.inverted &&
  `
        background: none;
        border: 2px solid whitel
        color: white;
        &:hover {
          background: white;
          color: black;
        }
  `};

はんのうせっけい

const Box = styled.div`
  background: ${props => props.blue || 'blue'};
  padding: 1rem;
  display: flex;
  width: 1024px;
  margin: 0 auto;
  @media (max-width: 1024) {
    width: 768px;
  }
  @media (max-width: 768) {
    width: 100%;
  }
`;

background: ${props => props.blue || 'blue'};

これでアイテムで加えた値を直接伝えることができます

  @media (max-width: 1024) {
    width: 768px;
  }
  @media (max-width: 768) {
    width: 100%;
  }

基本的には横1024 pxzで中央に整列し、横径が小さくなるにつれて縮小し、768 px未満ではmarinを除去し、充填する

反作用設計反復関数の作成

これらの操作を複数の構成部品で繰り返すと面倒になるかもしれませんが、関数化されている場合は使いやすいです
メディアを宣言して使用すると、スタイル面のコードが簡単になります.
メディアをStyledComponentに設定します.jsで作成されている場合は、実際の開発環境では、直接他のファイルにモジュール化→あちこちでロードして使用する方が便利です.

import styled, { css } from 'styled-components';

const sizes = {
  dexktop: 1024,
  tablet: 768,
};

// size 객체에 따라 자동으로 media 쿼리 함수를 만들어준다
const media = Object.keys(sizes).reduce((acc, label) => {
  acc[label] = (...arg) => css`
    @media (max-width: ${sizes[label] / 16}em) {
      ${css(...args)};
    }
  `;

  return acc;
}, {});

const Box = styled.div`
  background: ${props => props.color || 'blue'};
  padding: 1rem;
  display: flex;
  width: 1024px;
  margin: 0 auto;
    ${media.desktop`width: 768px;`}
    ${medai.tablet`width: 100%;`}
`;

`