get is a HOC over themeGet provided by styled-system... themeGet has the API of
themeGet(objectPath, fallbackValue)(props)
it takes props as a value and gets props.theme...
get just defaults with the default theme...
However, with the way we've been using it outside styled-components (not tagged template literal) and in object literal syntax, it will always fallback the default theme ignoring the passed theme, if it exists...
So, we should
- test components changing styles for passed themes via props ( does that automatically if one would use it so we don't have to worry about that)
- in any object literal syntax not
styled.div or whatever do get(key)(props) where props.theme is the theme... However, we've been converting the theme passed in as props as propTheme since it conflicts with the default theme we import in components... Thus, we should alias default theme we import in as defaultTheme (since we use it once) -
import {default as defaultTheme} from '../theme'
then whenever we deconstruct props for the component, we leave it as theme, instead of aliasing it to propTheme as such:
const Button = ({theme, ...props}){
}
// instead of ({theme: propTheme, ...props})
getis a HOC overthemeGetprovided by styled-system... themeGet has the API ofit takes props as a value and gets props.theme...
getjust defaults with the default theme...However, with the way we've been using it outside styled-components (not tagged template literal) and in object literal syntax, it will always fallback the default theme ignoring the passed theme, if it exists...
So, we should
styled.div or whateverdoget(key)(props)whereprops.themeis the theme... However, we've been converting thethemepassed in as props aspropThemesince it conflicts with the default theme we import in components... Thus, we should alias default theme we import in as defaultTheme (since we use it once) -then whenever we deconstruct props for the component, we leave it as
theme, instead of aliasing it topropThemeas such: