How to set CSS style of elements dynamically through backend? (user customization panel to change style of other webpages) [closed]

You can approach this by introducing a theming mechanism to the application. The way you described to get the JSON file can be usable in this approach as well. Introducing a context to manage theming in a React application would be much easier to simplify the process of applying user preferences across multiple components. Here's how you could implement it using functional components:

// ThemeContext.js
import React, { createContext } from 'react';

const ThemeContext = createContext();

export const ThemeProvider = ({ children, theme }) => (
  <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
);

export const useTheme = () => React.useContext(ThemeContext);

If you need to fetch the theme JSON from a backend and then pass it down to your components via context, you can modify the ThemeProvider component to handle this fetching logic. Here's how you could do it:

  // index.js
  // Theme should be fetched from an useEffect and pass it to the provider.

  const [theme, setTheme] = useState(null);

  useEffect(() => {
    // Fetch theme from backend
    fetchTheme().then((themeData) => {
      setTheme(themeData);
    });
  }, []);

  if (!theme) {
    // Theme data is not yet available
    return <div>Loading...</div>;
  }

  return (
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  );

This is how you use it any of your other components.

  const theme = useTheme();

  if (!theme) {
    // Theme data is not yet available
    return <div>Loading...</div>;
  }

  return (
    <div style={{ backgroundColor: theme.colors.primary }}>
      {/* Your other components */}
    </div>
  );