Overrides React Styled Component HOC - https://www.styled-components.com/docs/advanced#theming

idea.js

import styled from 'styled-components';

const MyComponent = styled.div`
  background: red;
  color: white;
`;

MyComponent.displayName = 'MyComponent';

const ThemeMyComponent = styled(MyComponent).attrs({
  overrides: props => props.theme[this.constructor.displayName].css
})`
  ${overrides}
`;

/*
 theme passed to theme provider
*/

const theme = {
  MyComponent: {
    css:`
      background: black;
      colour: white;
    `; // this could be require('MyComponent.css');
  }
}

alternatively just create a HOC similar to withTheme https://github.com/styled-components/styled-components/blob/master/src/hoc/withTheme.js eg.

export const withComponentTheme(MyComponent);

Or something more reusable

const ThemedComponent = component => styled(component).attrs({
  overrides: props => props.theme[this.constructor.displayName].css
})`
  ${overrides}
`;

<ThemedComponent component={MyComponent} />

or

const ThemedComponent = ({children})=> styled(component).attrs({
  overrides: props => props.theme[this.constructor.displayName].css
})`
  ${overrides}
`;

<ThemedComponent>
  <MyComponent myprop="Hello" />
</ThemedComponent>