styled-conents感情に変換

これまでCS-In-JS、styled-conntsを使用してきました.最近感情を使う人が増えているようで、私もこの機会に感情を知りたいです.
styled-conentsはよく似ていて、勉強にはあまり難しくないように見えますが、実際に経験してから知ったようです.
以前はstyled-conentsで반응형 레이아웃を実現しており、それを感情と見なし、グローバルに使用されるcss globalStylesとthemeも感情で代替される.
次の順番で文章を書いてみます.

スタイル-成分と感情の違い

スタイル-コンポーネントを感情に変換

global styles

theme

反応式レイアウト

情緒コードGithub

styled-conentsと感情の違い

https://blog.songc.io/react/react-js-in-css/
https://velog.io/@bepyan/styled-components-%EA%B3%BC-emotion-%EB%8F%84%EB%8C%80%EC%B2%B4-%EC%B0%A8%EC%9D%B4%EA%B0%80-%EB%AD%94%EA%B0%80
世界的な知名度が高く、国内ではstyle-componentが優位に立っている.번들 크기はemotionであり、デザイン-部品작다よりも優れている.성능賞は有意義な차이가 나지는 않는다賞です
また、emotionにおいて、서버 사이드 렌더링は、さらに서버쪽에 설정을 하지 않아도 된다の利点を有する.サーバ側が設定をレンダリングする場合、感情的に他の設定はありませんが、styled-componentsは설정이 필요の面倒があります.

Global Styles

styled-components

import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';

const GlobalStyle = createGlobalStyle`
  ${reset}

  html {
    font-size: 16px;    
  };
  
  body {  
    font-family: 'Noto Sans KR', sans-serif;
  } 

  select,
  input, 
  button,
  textarea {
    border: 0;
    outline: 0 !important;
  }
`;

export default GlobalStyle;

emotion

// src/styles/global

import React from 'react';
import { Global, css } from '@emotion/react';

const style = css`
  html {
    font-size: 16px;
  }

  body {
    font-family: 'Noto Sans KR', sans-serif;
  }

  select,
  input,
  button,
  textarea {
    border: 0;
    outline: 0 !important;
  }
`;

const GlobalStyle = () => {
  return <Global styles={style} />;
};

export default GlobalStyle;

感情からGlobal,cssを導入する.

グローバルラベルを生成した後、グローバルcssにスタイルで挿入します.

index.tsx

import React from 'react';
import { render } from 'react-dom';

import GlobalStyle from '@src/styles/global';
import theme from '@src/styles/theme';
import { ThemeProvider } from '@emotion/react';

render(
    <ThemeProvider theme={theme}>
      <GlobalStyle />
    </ThemeProvider>,
  document.querySelector('#app'),
);

Theme

styled-components

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

const fontSizes = {
  xxs: '12px',
  xs: '13px',
  sm: '14px',
  base: '16px',
  md: '18px',
  lg: '24px',
};

const colors = {
  black: '#000',
  dark: '#191a20',
  primary: '#3f4150',
  secondary: '#8c8d96',
};

const theme = {
  fontSizes,
  colors,
};

export default theme;

emotion

TypeScriptを使用する場合、トピック.d.tsを生成するには、typeを指定します.

// theme.ts

import { DefaultTheme } from '@emotion/react';

const theme: DefaultTheme = {
  fontSizes: {
    xxs: '12px',
    xs: '13px',
    sm: '14px',
    base: '16px',
    md: '18px',
    lg: '24px',
  },
  colors: {
    black: '#000',
    dark: '#191a20',
    primary: '#3f4150',
    secondary: '#8c8d96',
  },
};

export default theme;

// theme.d.ts

import '@emotion/react';

declare module '@emotion/react' {
  export interface DefaultTheme {
    fontSizes: {
      xxs: string;
      xs: string;
      sm: string;
      base: string;
      md: string;
      lg: string;
    };
    colors: {
      black: string;
      dark: string;
      primary: string;
      secondary: string;
    };
  }
}

Responsive Layout

Styled ComponentsインタラクティブレイアウトCommit履歴
Emotion+Type ScriptインタラクティブレイアウトCommit履歴

utils/media

styled-components

styled-media-queryライブラリを使用して、タブレット、デスクトップサイズを区分します.

import { generateMedia } from 'styled-media-query'
import { theme } from '../index'

export const media = generateMedia({
  ...theme.breakpoints,
})

emotion

Emotionドキュメントを参照して、tablet、desktopブレークポイントが設定されています.

const breakpoints = [768, 1200];

export const media = breakpoints.map((bp) => `@media (min-width: ${bp}px)`);

Grid/styles

styled-components

styled-media-queryを使用してメディアを表現します.タブレットとデスクトップアプリケーションcssに分けることができます.

export const StyledContainer = styled.div`
 width: 100%;
 padding: 0 5px;
 margin: 0 auto;
 
 ${media.greaterThan('tablet')`
   max-width: 1020px;
   padding: 0 30px;
 `}
 
 ${media.greaterThan('desktop')`
   max-width: 1140px;
   padding: 0;
 `}
`;

emotion

export const StyledContainer = styled.div`
  width: 100%;
  padding: 0 5px;
  margin: 0 auto;
  ${media[0]} {
    max-width: 1020px;
    padding: 0 30px;
  }
  ${media[1]} {
    max-width: 1140px;
    padding: 0;
  }
`;

の最後の部分

まだ感情をしっかり勉強していないので、コード実装には未熟ですが、コンビネーション学習を続けていきたいと思います.styled-conentsは、感情の両方にそれぞれの長所と短所があるようだ.だから今までどちらが良いか分からなかったのですが、入社すると感情を使っていると言うかもしれませんので、コードが実現するときは、早めに勉強して反感を持たないようにしたほうがいいです.