React CSS Theme

makeCssTheme.js

const makeCssTheme = (jsTheme, namespace) =>
  Object.entries(jsTheme).reduce((cssTheme, [key, value]) => ({
    ...cssTheme,
    [`--${namespace}-${key}`]: value,
}), {});

MyApp.jsx

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>
  );
}

theme.js

const yourTheme = {
  background: 'black',
  textColor: 'white',
  fontFamily: '"Roboto", sans-serif',
  fontWeight: 500,
  buttonPadding: '10px',
};