Styling multiple React apps with styled-components / styled-theming - reactjs

Question

I have a bunch of content-similar React apps to style, and I'm trying to shape a system, based on Styled-Components/Styled-Theming, to rule and modify their global styles just by changing the <ThemeProvider /> theme prop.
I've been trying different options, and this is what seems to work best :
an external themes.js file with all styles wrapped in a global object
import theme from "styled-theming";
const backG = theme.variants("observatory", "backG", {
positiveDark: {
_OBS1: 'hsl(73, 65%, 50%)',
_OBS2: 'hsl(210, 100%, 60%)',
},
negativeDark: {
_OBS1: 'hsl(8, 70%, 63%)',
_OBS2: 'hsl(0, 100%, 90%)',
},
actionDark: {
_OBS1: 'hsl(53, 82%, 62%)',
_OBS2: 'hsl(48, 100%, 50%)',
},
});
const cursor = theme.variants("observatory", "cursor", {
normal: {
_OBS1: 'initial',
_OBS2: 'initial',
},
pointer: {
_OBS1: 'pointer',
_OBS2: 'pointer',
},
});
const fontS = theme.variants("observatory", "fontS", {
h1: {
_OBS1: "2.4rem",
_OBS2: "2.25rem",
},
h2: {
_OBS1: "2.2rem",
_OBS2: "2rem",
},
h3: {
_OBS1: "2rem",
_OBS2: "1.75rem",
},
});
const flexL = theme.variants("observatory", "flexL", {
layout1: {
_OBS1: "; display: flex; justify-content: center;",
_OBS2: "; display: flex; justify-content: center;",
},
layout2: {
_OBS1: "; display: flex; justify-content: space-around; align-items: flex-start;",
_OBS2: "; display: flex; flex-direction: column; align-items: flex-start;",
},
layout3: {
_OBS1: "; display: flex; flex-direction: column; align-items: flex-start;",
_OBS2: "; display: flex; justify-content: space-around; align-items: flex-start;",
}
});
const themes = {
backG: backG,
cursor: cursor,
flexL: flexL,
fontS: fontS,
}
export {themes};
a CRA representing my app, with
an index.js file with 2 <ThemeProvider />, the first one referencing the external file, the second one dealing with themes inside of that external file
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
// styles
import {themes} from "./themes";
import {ThemeProvider} from "styled-components";
ReactDOM.render(
<ThemeProvider theme={themes}>
<ThemeProvider theme={{ observatory: "_OBS2" }}>
<App />
</ThemeProvider>
</ThemeProvider>,
document.getElementById('root')
);
an App.js file and other children components
import React from 'react';
// styles
import styled, { injectGlobal } from "styled-components";
// components
import ThreeButtons from "./ThreeButtons";
injectGlobal`
#import url('https://fonts.googleapis.com/css?family=Quicksand:400,500');
html {
font: 400 10px Roboto, sans-serif;
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font: 500 1.8rem Quicksand;
}
`
const Wrapper1 = styled.div`
display: ${props => props.theme.flexL};
align-items: ${props => props.theme.flexL};
`
const App = () => (
<Wrapper1 flexL="layout1">
<ThreeButtons alignSelf1="center" flexL="layout2" />
<ThreeButtons alignSelf2="flex-end" flexL="layout3" />
</Wrapper1>
);
export default App;
import React from "react";
// styles
import styled from "styled-components";
// components
import Button from "./Button";
const Wrapper1 = styled.div`
flex: 1;
display: ${props => props.theme.flexL};
flex-direction: ${props => props.theme.flexL};
align-items: ${props => props.theme.flexL};
`
const ThreeButtons = (props) => (
<React.Fragment>
<Wrapper1
flexL={props.flexL}
>
<Button
backG="positiveDark"
cursor="pointer"
fontS="h1"
label="lg-pos-button-pointer"
/>
<Button
alignSelf={props.alignSelf1}
backG="negativeDark"
cursor="pointer"
fontS="h2"
label="md-neg-button-pointer"
/>
<Button
alignSelf={props.alignSelf2}
backG="actionDark"
cursor="normal"
fontS="h3"
label="sm-act-button-nopointer"
/>
</Wrapper1>
</React.Fragment>
)
export default ThreeButtons;
import React from "react";
// styles
import styled from "styled-components";
const StyledButton = styled.button`
align-self: ${props => props.alignSelf};
background: ${props => props.theme.backG};
font-size: ${props => props.theme.fontS};
cursor: ${props => props.theme.cursor};
padding: 1.2rem 1.8rem;
border: none;
border-radius: .3rem;
margin: 1rem;
filter: saturate(50%);
transition: filter ease-in-out .15s;
&:hover {
filter: saturate(100%);
}
`
const Button = (props) => (
<StyledButton
backG={props.backG}
cursor={props.cursor}
alignSelf={props.alignSelf}
fontS={props.fontS}
>
{props.label}
</StyledButton>
)
export default Button;
Like I said before, it looks like it works, but still there're 2 things I'm not really comfortable with because I don't get it :
in the themes.js external file, I've been trying to create some kind of Flexbox mixins : to make it work, I must add an initial semicolon in the string value, or the first property is not considered and its value is not applied. Can someone explain me why ?
in the index.js file, I must nest a <ThemeProvider /> inside another one to make it work correctly : again, can someone explain me how Styled-Components and Styled-Theming are working together ?
generally speaking, have you got any tips or advice to make my solution a better solution or to solve my initial problem, which was to globally style a bunch of content-similar React apps ?
If you need, you can find the entire code on GitHub : https://github.com/paillenapple/styles_sandbox
Thanks for your help.
Silvère