如何通过后端动态设置元素的CSS样式？ （用户自定义面板可更改其他网页的样式）

Question

假设我们有一个包含多个页面的网站，还有一个用户帐户页面。用户在他的面板中有一个设置，可以为自己更改网站其他页面中某些部分的颜色/字体大小/样式等。应该如何实施？

我知道如果它是一个单页网络应用程序，我可以设置 css 变量并通过输入用 js 更改它们。这可以工作，因为它只是一个页面，所有不同的部分和菜单都有相同的 :root 。

如果是多页面网站怎么办？如何让设置影响其他页面的样式？我正在考虑通过从后端获取数据来设置 js 中这些可自定义元素的 css 样式，例如获取带有颜色的 json 文件，并使用从数据库接收到的数据设置这些元素的颜色。在设置中选择颜色将数据发布到数据库和其他页面获取样式并将其设置在特定元素上。

这是正确的方法吗？还有其他方法甚至库吗？

Answer 1

您可以通过向应用程序引入主题机制来解决此问题。您描述的获取 JSON 文件的方法也可以用于此方法。在 React 应用程序中引入上下文来管理主题会更容易简化跨多个组件应用用户首选项的过程。以下是如何使用功能组件来实现它：

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

如果您需要从后端获取主题 JSON，然后通过上下文将其传递给您的组件，您可以修改 ThemeProvider 组件来处理此获取逻辑。您可以这样做：

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

这就是您使用任何其他组件的方式。

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