IT/React
React. Part2. ch2. 04. emotion 2
체계성
2021. 11. 12. 21:31
○ 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>
</>
)
}