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

Question

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

我尝试过使用导入/导出和承诺，但我认为我做得不对。我不知道是进行 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）。如果您之间有很多层并且不想将它作为道具显式传递给所有层，则可以将此设置器放入上下文中。

我正在使用默认值初始化 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;

触发抓取后，您会看到主要内容的背景颜色发生了相应的变化。

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;