javascript - 如何从 .ini 文件将变量分配给 Material-UI 中的样式元素

Question

我必须从 .ini 文件中获取可变颜色并将其指定为我的应用程序的背景颜色。我对如何实现这一点完全感到困惑。我从 .ini 文件中获取登录页面的颜色，但我不知道如何将它分配给存在于类外部的主要组件中的样式对象。

我尝试过使用 import/export 和 promises，但我认为我做的不对。我不知道是调用 api 来获取样式对象所在的主要组件中的颜色，还是调用我正在使用它的登录页面来获取其他信息。

主要组成部分

const styles = {
  root: {
    display: 'flex',
    minHeight: '100vh',
  },
  drawer: {
    [theme.breakpoints.up('sm')]: {
      width: drawerWidth,
      flexShrink: 0,
    },
  },
  appContent: {
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
  },
  mainContent: {
    flex: 1,
    padding: '48px 36px 48px', //exists outside of main component
    background: '#eaeff1' // this is where I want to put the variable
  },
};

App.js//Root.js 下的顶级组件一

export default class App extends Component {
  render() {
    console.log("IN THE APP", window)
    return (
      <Switch>
        <Route exact path="/signin" component={SignIn} />
        <Route exact path="/changePassword" component={ChangePassword} />
        <Route exact path="/logout" component={Logout} />
        <Redirect exact from="/" to="/signin" />
        <Route path="/" component={AsyncApp} />
      </Switch>
    )
  }
}

登录页面//我正在调用 api 以获取信息的地方

  async componentDidMount(){

    let response1 = await fetch('/api/getStatus2').then(res => res.json())

      console.log(">>>>>>>>>>>>>>>>", response1)

      this.setState({
        display_name: response1.display_name
      })
   }

Answer 1

您需要动态加载的自定义样式属性可以放在您的主题中。

在顶层，您需要一些状态来保存 API 应加载的变量。这在我的示例中称为 themeVariables。然后将 setter 传递给模拟 API 调用的组件(在我的示例中为 Fetcher)。如果中间有很多层并且不想将它作为 prop 显式传递给所有层，则可以将此 setter 放入上下文中。

我正在用默认值初始化 themeVariables，这样它的预期结构就清晰了，这样使用自定义变量的样式在 API 调用发生之前仍然有效。每当 themeVariables 发生变化时，它都会用于创建一个提供给整个 App 的新主题。

index.js

import React from "react";
import ReactDOM from "react-dom";

import MainContent from "./MainContent";
import Fetcher from "./Fetcher";
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";

const defaultThemeVariables = {
  palette: {
    mainContentBackgroundColor: "lightblue"
  }
};
function App() {
  const [themeVariables, setThemeVariables] = React.useState(
    defaultThemeVariables
  );
  const theme = React.useMemo(() => createMuiTheme(themeVariables), [
    themeVariables
  ]);
  return (
    <MuiThemeProvider theme={theme}>
      <div className="App">
        <MainContent />
        <Fetcher setThemeVariables={setThemeVariables} />
      </div>
    </MuiThemeProvider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

一旦 API 调用完成，它需要使用传递给它的 setter 来适本地设置 themeVariables。

Fetcher.js

import React from "react";

const Fetcher = ({ setThemeVariables }) => {
  const handleClick = () => {
    // This is simulating handling the results of an API call to get the color.
    setThemeVariables({
      palette: {
        mainContentBackgroundColor: "lightgreen"
      }
    });
  };
  return <button onClick={handleClick}>Trigger Fetch</button>;
};
export default Fetcher;

触发fetch后，你会看到主要内容的背景色发生了相应的变化。

MainContent.js

import React from "react";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  mainContent: {
    background: theme.palette.mainContentBackgroundColor
  }
}));
const MainContent = () => {
  const classes = useStyles();
  return <div className={classes.mainContent}>Main Content</div>;
};
export default MainContent;