styled-components theme

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

// Button/Button.js (The basic component)
const Button = ({className, children}) => (
  <button className={className}>
    {children}
  </button>
);

Button.propTypes = {
  className: PropTypes.string,
  onClick: PropTypes.func,
  children: PropTypes.any
};

// Button/index.js (the exposed component incl. styles)
const StyledButton = styled(Button)`
  color: ${props => props.theme.button.mainColor};
  background-color: ${props => props.theme.button.backgroundColor};
  &:hover {
    background: ${props => props.theme.button.backgroundColorOnHover};
  }
`;

// themes/Backoffice/index.js === wix-style-react/themes/BackOffice
const backOfficeTheme = {
  button: {
    mainColor: 'red',
    backgroundColor: 'gold',
    backgroundColorOnHover: 'blue'
  }
};

// themes/TPA/index.js === wix-style-react/themes/TPA
const tpaTheme = styleParams => ({
  button: {
    mainColor: styleParams['color-1'],
    backgroundColor: styleParams['color-2'],
    backgroundColorOnHover: styleParams['color-3']
  }
});

// App.js
const styleParams = { //from SDK
  'color-1': 'green',
  'color-2': 'purple',
  'color-3': 'black',
};

class App extends React.Component {
  render() {
    return (
      <div>
        <ThemeProvider theme={backOfficeTheme}>
          <StyledButton>
            I am a Backoffice button
          </StyledButton>
        </ThemeProvider>
        <ThemeProvider theme={tpaTheme(styleParams)}>
          <StyledButton>
            I am TPA button
          </StyledButton>
        </ThemeProvider>
      </div>
    );
  }
}

export default App;