Possible to lift local custom properties to global :root?

[jamesthomsondev]

I'm looking for a solution where I can lift custom css properties up to a global :root definition. I know createGlobalStyle exists, however this is limited to one instance. What I'd like is to be able to define CSS vars locally to my component, but they get extract to a single :root.

e.g.

addToCssRoot('--my-css-color-var: black')

const MyStyledComp = styled.div`
  // OR inline such as,
 //  pseudo code, this obviously won't work 
  !:root {
    --my-css-color-var: black
  }

 // css styles
`

const MyOtherStyledComp = styled.div`
  color: var(--my-css-color-var)
`

[ghost]

I'm looking for a solution where I can lift custom css properties up to a global :root definition. I know createGlobalStyle exists, however this is limited to one instance. What I'd like is to be able to define CSS vars locally to my component, but they get extract to a single :root.

e.g.

addToCssRoot('--my-css-color-var: black')

const MyStyledComp = styled.div`
  // OR inline such as,
 //  pseudo code, this obviously won't work 
  !:root {
    --my-css-color-var: black
  }

 // css styles
`

const MyOtherStyledComp = styled.div`
  color: var(--my-css-color-var)
`

Maybe this will solve your problem

Why createGlobalStyle is Limiting

createGlobalStyle from styled-components is designed to inject global styles, but it has a few limitations in the context of your requirement:

• One-time use: It's primarily intended for defining styles that are truly global and used throughout your application.
• Lack of dynamism: It's not well-suited for scenarios where you want to define custom CSS properties locally within a component and have them dynamically promoted to the root.

Custom Solution

Here's a breakdown of a custom solution to lift local CSS properties to the global :root:

1. Create a custom React hook:

import { useEffect, useState } from 'react';

const useGlobalCssVars = () => {
  const [cssVars, setCssVars] = useState([]);

  useEffect(() => {
    const root = document.documentElement;
    cssVars.forEach(({ name, value }) => {
      root.style.setProperty(name, value);
    });
  }, [cssVars]);

  const addCssVar = (name, value) => {
    setCssVars((prevCssVars) => [...prevCssVars, { name, value }]);
  };

  return { addCssVar };
};

2. Use the hook in your components:

import { useGlobalCssVars } from './useGlobalCssVars'; // Assuming your custom hook is in this file

const MyStyledComp = styled.div`
  color: var(--my-css-color-var);
`;

const MyOtherStyledComp = styled.div`
  color: var(--my-css-color-var);
`;

const App = () => {
  const { addCssVar } = useGlobalCssVars();

  useEffect(() => {
    addCssVar('--my-css-color-var', 'black');
  }, []);

  return (
    <div>
      <MyStyledComp />
      <MyOtherStyledComp />
    </div>
  );
};

How It Works:

1. The custom Hook (useGlobalCssVars):

   • Manages a state to store CSS variable name-value pairs.
   • Uses useEffect to iterate through the stored variables and applies them to the document.documentElement (representing the :root element), ensuring variables are extracted to the global scope.

2. In Your Components:

   • Import the useGlobalCssVars hook.
   • Call the addCssVar function to define a CSS property with its corresponding value. This property will be automatically promoted to the global :root.
   • Use the custom CSS properties in your styled components or anywhere else within your application.

[quantizor]

The upcoming release introduces createTheme, which does exactly this — it generates CSS custom properties (variables) from your theme object and emits them at :root (or a custom selector) via createGlobalStyle.

import { createTheme, ThemeProvider } from 'styled-components';

const { theme, GlobalStyles } = createTheme({
  colors: { primary: '#007bff', text: '#333' },
  spacing: { sm: '8px', md: '16px' },
});
// theme.colors.primary === 'var(--sc-colors-primary, #007bff)'

You can test the prerelease:

npm install styled-components@test

Staged release PR: #5687