Styled Components

공공 반복되는 스타일

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

const commonBtnStyle = css`
  border-radius: 16px;
`;

const SmallBtn = styled.button`
  ${commonBtnStyle}
`;

 

not, hover등의 선택자

const SmallBtn = styled.button`
  &:not(:last-child) {
    margin-right: 16px;
  }
  
  &:hover {
  	///
  }
`;

 

Props로 스타일 컨트롤

<SmallBtn className={isVerified ? 'selected' : undefined}>인증</SmallBtn>

const SmallBtn = styled.button`
  background-color: ${(props: any) => (props.className === 'selected' ? '#4EC1BF' : '#fff')};
  color: ${(props: any) => (props.className === 'selected' ? '#fff' : '#4EC1BF')};
`;

 

theme

theme.ts

import { DefaultTheme } from 'styled-components';

const theme: DefaultTheme = {
  colors: {
    primary: '#4EC1BF',
    accent: '#4ec1bf',
    background: '#FFFFFF',
  },
  fonts: {
    SUIT: 'SUIT Variable, sans-serif',
    NOTOSANSKR: "'Noto Sans KR', sans-serif",
  },
};

export default theme;

 

App.tsx

import { ThemeProvider } from 'styled-components';
import theme from './styles/theme';
import GlobalStyle from './styles/GlobalStyle';

function App() {
  return (
      <ThemeProvider theme={theme}>
          <GlobalStyle />
      </ThemeProvider>
  );
}

export default App;

 ${({ theme }) => theme.colors.white}