Merge theme providers in styled components

themes.js

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

const globalTheme = {
  mainColor: 'black',
  borderColor: '#99abb3',
  borderRadius: '7px',
  mixins: {
    link: `
      color: red;
      cursor: pointer;
    `,
  },
};

const getLocalMixins = theme => ({
  flexColumn: `
    display: flex;
    flex-direction: column;
  `,
  borderWithRadius: `
    border: 1px ${theme.borderColor} solid;
    border-radius: ${theme.borderRadius}
  `,
});

const localVariables = {
  mainColor: 'red',
  secondColor: 'blue',
};


const getMergedTheme = theme => ({
  ...theme,
  ...localVariables,
  mixins: {
    ...theme.mixins,
    ...getLocalMixins(theme),
  },
});

const StyledComponent = styled.div`
  width: 150px;
  height: 150px;
  color: ${({ theme }) => theme.mainColor};
  ${({ theme }) => theme.mixins.flexColumn}
`;

export default () => {
  return (
    <ThemeProvider theme={globalTheme}>
      <ThemeProvider theme={getMergedTheme}>
        <MyFeature>
          <StyledComponent />
        <MyFeature />
      </ThemeProvider>
    </ThemeProvider>
  );
};