Emotion에서 props과 theme 활용해서 스타일 적용하기

 

 

// theme.ts

export const theme = {
  colors: {
    'subway-line-1': '#0d3692',
    'subway-line-2': '#33a23d',
    'subway-line-3': '#fe5d10',
    'subway-line-4': '#00a2d1',
    'subway-line-5': '#8b50a4',
    'subway-line-6': '#c55c1d',
    'subway-line-7': '#54640d',
    'subway-line-8': '#f14c82',
    'subway-line-9': '#aa9872',
  },
};

import React from 'react';
import {ThemeProvider} from '@emotion/react';
import {NavigationContainer} from '@react-navigation/native';

import Navigator from '~/navigations';
import {theme} from './theme';

const App = () => {
  return (
    <NavigationContainer>
      <ThemeProvider theme={theme}>
        <Navigator />
      </ThemeProvider>
    </NavigationContainer>
  );
};

export default App;

 

 

 

 

/** @jsx jsx */
import React from 'react';
import styled, {css} from '@emotion/native';
import {useTheme, ThemeProvider, jsx} from '@emotion/react';

const Container = styled.View`
  height: 30px;
  width: 30px;
  border-radius: 15px;
  jusfify-content: center;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
`;

const Text = styled.Text`
  color: white;
  font-weight: bold;
  font-size: 15px;
`;

interface Props {
  subwayLine: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
}

function SubwayLineTag({subwayLine}: Props) {
  const theme = useTheme();
  return (
    <Container
      style={css`
        background-color: ${theme.colors[`subway-line-${subwayLine}`]};
      `}>
      <Text>{subwayLine}</Text>
    </Container>
  );
}

export default SubwayLineTag;