styled-components

• CSS in JS (스타일 정의를 css파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일)
• 스타일에 대한 고유한 클래스 이름을 생성

설치

# with npm
npm install --save styled-components

# with yarn
yarn add styled-components

 

ThemeProvider

import styled, { ThemeProvider } from 'styled-components';

const Box = styled.div`
  color: ${(props) => props.theme.color};
`;

function App() {
  return (
    <ThemeProvider theme={{ color: 'red' }}>
      <Box>I'm red!</Box>
    </ThemeProvider>
  );
}

export default App;