React. Part2. ch2. 04. emotion 2

○ styled components vs emotion

 -  https://github.com/jsjoeio/styled-components-vs-emotion

 

○ props 전달 css

/** @jsx jsx */
import { jsx, css } from '@emotion/react'

const pinkInput = css`
  background-color: pink;
`;
const RedPasswordInput = props => (
  <input
    type="password"
    css={css`
      background-color: red;
      display: block;
    `}
    {...props}
  />
)

render(
  <div>
    <RedPasswordInput placeholder="red" />
    <RedPasswordInput placeholder="pink" css={pinkInput} />
  </div>
);

MediaQueries - map 

/** @jsxImportSource @emotion/react */
import {css} from '@emotion/react'

const breakpoints = [576, 768, 992, 1200]
const mq = breakpoints.map(
  bp => `@media (min-width: ${bp}px)`
)

export default function MediaQueriesEx() {
  
  return ( 
    <>
  <div>
    <div
      css={{
        color: 'green',
        [mq[0]]: {
          color: 'gray'
        },
        [mq[1]]: {
          color: 'hotpink'
        }
      }}
    >
      Some text!
    </div>
    <p
      css={css`
        color: green;
        ${mq[0]} {
          color: gray;
        }
        ${mq[1]} {
          color: hotpink;
        }
      `}
    >
      Some other text!
    </p>
  </div>
    </>
  )
}