Styled Components - (1) Theme & Global Style

緒論:なぜ使いますか.Theme:トピックに保存し、グローバルトピックに適用してレンダーツリーのすべての構成部品からアクセスGlobalStyle:プロジェクトの開始前に共通のアプリケーションが必要なコードを書きたい場合は、を参照してください.
Styled Components公式サイト
テーマ
テキストスタイル
Theme
タイプスクリプト(推奨)
動作速度の増加
使用
(1)Typeスクリプト宣言ファイルの作成
タイプスクリプトとして、styledコンポーネントが提供するDefaultThemeインタフェースを最初に宣言して起動します.やらないとタイプスクリプトがエラーになります.

// import original module declarations
import 'styled-components';

// and extend them!
declare module 'styled-components' {
  export interface DefaultTheme {
    // 여기에 적용하고 싶은 속성과 타입을 정의한다
    borderRadius: string;

    colors: {
      첫번째: string;
      두번째: string;
    };
  }
}

(2)テーマファイルの作成
Default Themeを定義すれば使えます未定義のプロパティを入力すると、タイプスクリプトにエラーが投げ出されます.

import { DefaultTheme } from 'styled-components';

const 테마: DefaultTheme = {
  borderRadius: '5px',

  colors: {
    첫번째: 'cyan',
    두번째: 'magenta',
  },
};

export { 테마 };

(3)Theme Providerを使用してThemeを提供する
テーマ曲を作成した場合は、テーマ曲をいつでもどこでも提供しているベンダーに渡します.あげたら、アイテムがどこにあっても、道具屋さんに届けられます.

import styled, { ThemeProvider } from 'styled-components'
import 테마 from './theme'

const Box = styled.div`
  color: ${props => props.테마.color.첫번째};
`

render(
  <ThemeProvider theme={테마}>
    <Box>I'm mediumseagreen!</Box>
  </ThemeProvider>
)

Global Style
プロジェクトの開始時にnomalize cssまたはユーザーがグローバルに使用するスタイルを定義し、プロジェクト全体に適用します.styledコンポーネントがサポートするcreateGlobalStyledメソッドを使用して生成します.
(1)グローバルスタイルコンポーネントの作成
createGlobalStyledを使用して必要なcssを定義する

// GlobalStyle.jsx
import { createGlobalStyle } from "styled-components";
import normalize from "styled-normalize"; // 필요하면 설치하시오

const GlobalStyle = createGlobalStyle`
  ${normalize}

  * {
    box-sizing: border-box;
  }

  body {
    font-family: "고딕", sans-serif;
    line-height: 1.5;
  }
`;
export default GlobalStyle;

(2)グローバルスタイル用
propsで渡された値を使用してスタイルを設定することもできます!
ThemeProviderでThemeを渡すときにもThemeにアクセスできます!

const GlobalStyle = createGlobalStyle`
  body {
    color: ${props => (props.whiteColor ? 'white' : 'black')};
    font-family: ${props => props.테마.fontFamily};
  }
`

<ThemeProvider theme={테마}>
	<GlobalStyle whiteColor />
</ThmeProvider>

結論:どのように使うか

Global-style:nomalizeを使用してリセットするか、styled-comonentsでサポートされているcssメソッドを使用して一般的なリセットファイルを作成してインポートできます.

Theme:コンテキストapiがあれば、どこからでもアクセスできるスタイルオブジェクトがあると思うと便利です.ex)反作用コードを使いやすい.(後で更新するとリンクが残ります)