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

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

我尝试过使用进出口和承诺，但我认为我做得不对。我不知道是调用api来获取styles对象所在的主组件中的颜色，还是从登录页面调用来获取其他信息

主要成分

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向下的顶级组件1

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应该加载的变量。在我的示例中，这被称为

themeVariables

。然后将setter传递给模拟API调用的组件（

Fetcher

）。如果中间有许多层，并且不想将其作为道具显式地传递给所有层，则可以将该setter放入上下文中

我正在用默认值初始化mevariables，以便它的预期结构清晰，并且使用自定义变量的样式在API调用发生之前仍然有效。无论何时

themeVariables

发生更改，都会使用它创建一个新主题，并提供给整个应用程序

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

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;

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;

触发提取后，您将看到主内容的背景颜色相应地改变

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

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;

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;

从“React”导入React；
从“@material ui/core/styles”导入{makeStyles}”；
const useStyles=makeStyles（主题=>({
主要内容：{
背景：theme.palette.mainContentBackgroundColor
}
}));
常量MainContent=（）=>{
const classes=useStyles（）；
返回主要内容；
};
导出默认主内容；