Skip to content

Instantly share code, notes, and snippets.

@DominicTobias
Last active Sep 15, 2020
Embed
What would you like to do?
React CSS Theme
const makeCssTheme = (jsTheme, namespace) =>
Object.entries(jsTheme).reduce((cssTheme, [key, value]) => ({
...cssTheme,
[`--${namespace}-${key}`]: value,
}), {});
function MyApp({ theme }) {
const cssTheme = useMemo(() => makeCssTheme(theme, 'xx'), [theme]);
return (
<div style={cssTheme}>
{/*
Any component in here now has access to:
var(--xx-buttonPadding), var(--xx-background) etc.
*/}
</div>
);
}
const yourTheme = {
background: 'black',
textColor: 'white',
fontFamily: '"Roboto", sans-serif',
fontWeight: 500,
buttonPadding: '10px',
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment