styled-components를 외부 파일에 적용 후 반영하기

# styled-components를 외부 파일에 적용하여 App.js에 적용하는 방법

 

1. MyCss.js 파일을 작성

import styledComponents from 'styled-components';

const Title = styledComponents.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

export { Title };

2. App.js에 적용

// css 파일 임포트
import './App.css';
import { Title } from './MyCss';

function App() {
  return (
    <div>
      {/* css 영역의 값을 아래에 적용 */}
      <Title>헬로</Title>
    </div>
  );
}

export default App;

3. 결과 확인