[React]スタイル-コンポーネント-深化

これまでのリリースに続いてstyled-componses公式ドキュメントのAPIページ上のコンテンツの理解内容が優先的に整理された.
1-1. 構成部品タイプを変更できますか?
1-2. propsをレンダリングしてもらえますか?
2-1. グローバルスタイルを適用できますか?
2-2. JavaScriptからcssを直接書くことはできませんか?
2-3. アニメーションキーを生成できますか?
1.さまざまな機能のアイテム
1)構成部品タイプの変更-asas propsを使用して、構成部品のタイプを変更できます.
(withComponentと同様、with Componentはサポートを停止します)

const Button = styled.button`
    padding: 2px 5px;
    color: ${props => props.theme.color};
    border-radius: 3px;
`
<Button as="a">Click Me</Button>

Button要素はbutton要素として定義されるが、as propsのためaタグとしてレンダリングされる.
2)仮支柱
propsがreactノードに渡されたりDOM要素にレンダリングされたりしないようにするには、props名の前に$を付けると一時的なpropsになります.

const Comp = styled.div`
  color: ${props =>
    props.$draggable || 'black'};
`;

render(
  <Comp $draggable="red" draggable="true">
    Drag me!
  </Comp>
);

3)構成部品を作成せずにスタイルを指定する
単純なスタイルを付けるだけで、構成部品を作成する必要がない場合はcssplsを使用できます.

<div
  css={`
    background: papayawhip;
    color: ${props => props.theme.colors.text};
  `}
/>
<Button
  css="padding: 0.5em 1em;"
/>

2. Helpers
1) createGlobalStyle
グローバルスタイルを処理するアシスタント関数
デフォルトでは、styled構成部品はローカルcssクラスとして指定され、他の構成部品から分離されます.createGlobalStyleの場合、この制限は削除され、css resetまたはdefault styleを適用するために使用できます.

import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle`
  body {
    color: ${props => (props.whiteColor ? 'white' : 'black')};
  }
`
function App() {
  return (
    <>
	 <GlobalStyle/>
	 <Home>
    </>
  );
}

あるいは、ThemeProviderを使用して構成部品を親構成部品に包む場合、global styleは、サブ構成部品全体に適用され得る.
2) css
JavaScriptコードにcssの関数を入力するのに役立ちます

const complexMixin = css`
  color: ${props => (props.whiteColor ? 'white' : 'black')};
`

3) keyframe
アニメーションキーの作成を支援する関数

import styled, { keyframes } from 'styled-components'

const fadeIn = keyframes`
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
`

const FadeInButton = styled.button`
  animation: 1s ${fadeIn} ease-out;
`