I found a solution that worked for me, as suggested by Basile, I am using the emotion css-in-js library where styles go into styled components. emotion comes with a themeing mechanism to dynamically style css, and maintain global styling.
css-in-js styled components
const MButton = styled.button`
background-color: ${(props) => props.theme.colors.primarycolor};//using theme
border: 3px solid $color;
border-radius: 20px 20px 20px 20px;
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
-ms-border-radius: 20px 20px 20px 20px;
-o-border-radius: 20px 20px 20px 20px;
`;
export default class index extends Component { ... your component
For global styling and themeing I used emotions theme, themeprovider, and global components. I define my themes in a seperate file, import it, apply
const makeGlobalStyles = (theme) => css` any additional global styling not dependent on differing themes in theme`;
//supply styles to global component which manages global theme style state
const GlobalStyles = withTheme(({ theme }) => (
<Global styles={makeGlobalStyles(theme)} />
));
store theme as a state in apps main component...
this.state = {
viewState: "DARK",
theme: theme.DARK,//use a method to change these states to then change the theme styles used across the app
Then provide theme state realtime to all components who utilize it
render(){
const {viewState,theme} = this.state;
return(
<ThemeProvider theme={theme}>
<GlobalStyles />
any logic for your application, pass prop theme to components to dynamically style to the theme
<SomeComponent theme={theme}/>
<ThemeProvider/>
)}
