---

Style Import

작성한 Style은 Import를 통해 컴포넌트에서 공유

컴포넌트의 규모가 커질수록 관련된 파일들이 많이 생성되어 구조화가 복잡해진다.

그래서 로직과는 상관없는 Styled_Components코드는 개별 파일로 관리해 필요시 컴포넌트에서 Import를 사용한다.

위와 같이 코드를 분리하면 핵심적인 기능을 담당하는 파일들은 시각적으로 정리되어 가독성이 향상된다.

// styles.js
const ListCount = styled.span`
  margin-right: 0.5em;
`

// ShoppingList.js
import { ListCount } from ".styles";

const ShoppingList = () => {
  return <ListCount>...</ListCount>;
};

---

Global CSS

Global CSS는 프로젝트 전역 단위로 style을 적용

Global CSS는 createGlobalStyle을 사용하며 프로젝트 전역 단위의 강력한 Style을 적용하여 기존의 적용되 있던 Style을 덮어씌운다.

즉 기존 Styled_Components(style.div, styled.button…)는 Local Scope를 가지지만 Global CSS는 이와 반대다.

아래 예제는 Ant_Design의 기존 Style을 Global CSS로 덮어씌운다.

import { Menu } from 'antd';
import styled, { createGlobalStyle } from 'styled-components';

const Global = createGlobalStyle`
  .ant-menu-item {
    display: inline-block;
  }
`;

const ExampleCompo = () => {  
  return (
    <>
      <Global /> // createGlobalStyle      
      
      <Menu>
        <Menu.Item>1</Menu.Item>
        <Menu.Item>2</Menu.Item>
        <Menu.Item>3</Menu.Item>
      </Menu>
    </>
  )
};

export default ExampleCompo;

Global CSS Minxin

Global CSS는 앞선 포스팅에서 소개한 Minxin 기능을 사용할 수 있다.

해당 기능을 사용하면 Flex, Position..등과 같은 반복된 형태의 Style을 보다 간결하고 전역적으로 사용할 수 있다.

사용방법은 다음과 같다.

1. 프로젝트 루트 디렉토리에 Minxin 정의

// globalStyles.js
import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  @mixin position($position = 'absolute', $top = '50%', $left = '50%') {
    position: $position;
    top: $top;
	left: $left;
  }
`;

export default GlobalStyle;

2. 프로젝트의 최상단(해당 예제에서는 페이지의 Layout을 담당하는 AppLayout.js)에 정의한 GlobalStyle을 import

// AppLayout.js
import React from 'react';
import PropTypes from 'prop-types';

import GlobalStyle from "../globalStyles.js";

const AppLayout = ({ children }) => {  
  return (
    <>
      <GlobalStyle />
      {children}           
    </>
  )
};

AppLayout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default AppLayout; 

3. 정의한 Minxin을 컴포넌트에서 사용

const ListWrapper = styled.div`
  @include position(absolute, 50%, 50%);
`;

const ShoppingList = () => {
  return (
    <ListWrapper>
      <h2>맛있는 사과</h2>
      <button>구매</button>
    </ListWrapper>
  );
} 

Global Theme

Global Theme은 Color, Font...등의 Style을 전역으로 정의한다.

Global CSS Minxin과 마찬가지로 반복되는 Style 코드를 간결하고 전역적으로 사용할 수 있으며 사용방법은 아래와 같다.

1. 프로젝트 루트 디렉토리에 theme.js파일을 생성한 뒤 Theme을 정의

// theme.js
const theme = {
  headerColor: red;
  buttonColor: yellow;
}

export default theme;

2. 프로젝트의 최상단(해당 예제에서는 페이지의 Layout을 담당하는 AppLayout.js)에 정의한 Theme을 import

// AppLayout.js
import React from 'react';
import PropTypes from 'prop-types';
import styled, { ThemeProvider } from "styled-components";

import theme from "./theme";

const AppLayout = ({ children }) => {  
  return (
    <>
      <ThemeProvider theme={theme}>
        {children}
      </ThemeProvider>
    </>
  )
};

AppLayout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default AppLayout; 

3. 정의한 Theme을 컴포넌트(해당 예제에서는 AppLayout의 children 컴포넌트인 ShoppingList.js)에서 사용

// ShoppingList.js
import React from "react";
import styled, { ThemeProvider } from "styled-components";

import theme from "./theme";

const ListBtn = styled.button`  
  background-color: ${props => props.theme.buttonColor};
`;

const ShoppingList = () => {
  return (
    <ListWrapper>
      <h2>맛있는 사과</h2>
      <ListBtn>구매</ListBtn>
    </ListWrapper>
  );
} 

export default ShoppingList;

---

참고 자료

styled-components 공식문서
벨로퍼트와 함께하는 모던 리액트 - styled-components
React로 NodeBird SNS 만들기 - 제로초