styled-component

App.tsx

import { Container } from 'react-bootstrap';
import Footer from './components/organisms/Footer';
import Layout from './components/organisms/Layout';
import { useReducer } from 'react';
import { IPlaceThemeProvider, PlaceThemeContext } from './context/ThemeContext';
import ThemeReducer from './context/ThemeReducer';
import './styles/main.scss';
import GlobalStyle from './styles/theme/global';
import { ThemeProvider } from 'styled-components';
import green from './styles/theme/green';
import "mapbox-gl/dist/mapbox-gl.css"; 

function App() {
  const [currentTheme, setNewTheme] = useReducer(ThemeReducer, []);
  const themeContextProviderValue: IPlaceThemeProvider = { currentTheme, setNewTheme };
  if (Array.isArray(currentTheme) && !currentTheme.length) {
    setNewTheme(green);
  }

  return (
    <PlaceThemeContext.Provider value={themeContextProviderValue}>
      <ThemeProvider theme={currentTheme.updatedTheme}>
        <Layout>
          <GlobalStyle />
          <Container>Layout</Container>
          <Footer />
        </Layout>
      </ThemeProvider>
    </PlaceThemeContext.Provider>
  );
}

export default App;

global.ts

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

export default createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    background: ${props => props.theme.colors.background};
    color: ${props => props.theme.colors.text};
  }
`;

export const ThemeContainer = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
`;

export const CustomContainer = styled.div``;

export const PlaceSection = styled.section`
  padding: 5px;
  background: ${props => props.theme.section.background};
  color: ${props => props.theme.section.text};
`;