Next에 Emotion 사용하기

리액트에 이모션 설치

styled-component도 사용할거니까 @emotion/styled도 같이 설치해준다

$ npm install --save @emotion/react @emotion/styled

 

 

 

바벨 플러그인을 위한 설치

$ npm add @emotion/babel-preset-css-prop

 

 

 

.babelrc 파일 생성

언어끼리 호환성을 지켜주기 위해서 바벨을 만들어준다.

{
  "presets": ["next/babel"],
  "plugins": ["babel-plugin-styled-components"]
}

 

 

 

 

---

Global style

1. 전체적으로 쓸모없는 여백이나 ul, li 스타일링 등을 쓰고싶지 않으니 글로벌 스타일을 작성해줬다.

// style/global.js
import { Global, css } from "@emotion/react";
import styled from "@emotion/styled";

const style = css`
  * {
    margin: 0;
    padding: 0;
    text-decoration: none;
    box-sizing: border-box;
    list-style: none;
    padding: 0px;
    margin: 0px;
  }
`;

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

export default GlobalStyles;

 

 

2. theme는 여러 설정들을 단축어로 사용하고 싶을때 사용하면 된다고한다.

// style/theme.js
const theme = {
  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;

 

 

3. global style과 theme 적용하기

글로벌 스타일을 전체에 적용하기위해 루트 컴포넌트 app에서 global style을 가장 상위 컴포넌트로 올려놓는다.

또한 theme를 적용하기위해 만들어 둔 theme를 import 했고, ThemeProvider를 import해서 컴포넌트들을 감싸주었다.

//_app.jsx
import GlobalStyles from "../style/global";
import { ThemeProvider } from "@emotion/react";
import theme from "../style/theme";

const App = ({ Component, pageProps }) => {
  return (
    <>
      <ThemeProvider theme={theme}>
        <GlobalStyles />
        <Component {...pageProps} />
      </ThemeProvider>
    </>
  );
};

export default App;

 

 

 

---

style-components css

styled. 뒤에 원하는 요소를 넣고, css를 넣듯 속성을 넣어주면 된다/

저장한 변수명을 컴포넌트처럼 사용할 수 있다.

const ButtonGreen = styled.button`
  color: green;
`

render(<ButtonGreen> 색만 얹은 버튼 </ButtonGreen>)

 

 

 

속성값을 받아서 다르게 css를 주기

import styled from '@emotion/styled'

const FlexDiv = styled.div`
  display: flex;
`

const Button = styled.button`
  color: ${props => (props.primary ? 'hotpink' : 'turquoise')};
`

const Container = styled.div(props => ({
  // 기본적으로 flex 속성을 준다
  display: 'flex',
  
  // props에 column이 있어야 실제로 column 속성이 적용된다
  flexDirection: props.column && 'column'
}))

render(
	
  <Container column>
  
    // primary가 없기때문에 hotpink 색으로 나올것이다
    <Button>This is a regular button.</Button>
    
    // primary가 있기때문에 blue 색으로 나올것이다
    <Button primary>This is a primary button.</Button>
  </Container>
)

 

Container 컴포넌트 props에 column이 있을때

 

Container 컴포넌트 props에 column이 없을때

 

 

 

 

 

세부 속성을 한꺼번에 한 컴포넌트에서 css 주기

이렇게하면 ul 안에 있는 li 속성도 접근할 수 있다.

const UlComment = styled.ul`
  display: flex;
  justify-content: flex-start;
    & > li{ margin-right: 10px;}
`;

 

 

코드에 직접 css 주기

import { css } from '@emotion/react'


render(
  <div
    css={css`
      padding: 32px;
      background-color: hotpink;
      font-size: 24px;
      border-radius: 4px;
    `}
  >
    Hover to change color.
  </div>
)