材质 UI 全局 css 变量答案

【问题标题】：Material UI global css variables材质 UI 全局 css 变量
【发布时间】：2020-04-01 13:13:07
【问题描述】：

我想声明一些我将在我的组件中重用的 css 变量。这就是你使用普通 css 的方式：

:root {
  --box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.3);
}

然后将按如下方式使用：

.my-class {
  box-shadow: var(--box-shadow);
}

如何使用 useStyles 达到同样的效果？我尝试了以下无济于事：

const theme = createMuiTheme({
  shadowing: {
    boxShadow: "0 2px 5px -1px rgba(0, 0, 0, 0.3)",
  }
});

我的主应用程序包含在

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>

我尝试在我的组件中使用它：

const useStyles = makeStyles(theme => ({
  workImage: {
    boxShadow: theme.shadowing,
  },
}));

但它不起作用。

【问题讨论】：

【解决方案1】：

“createMuiTheme”函数接受具有有限键集的对象。（调色板、排版、间距...等）

你可以只使用普通对象。

const theme = {
  shadowing: {
     boxShadow: "0 2px 5px -1px rgba(0, 0, 0, 0.3)",
  }
};

【讨论】：

【解决方案2】：

就我而言，我必须同时使用 createMuiTheme 和自定义变量。为了实现它，我做了如下操作。

首先我用 createMuiTheme 创建了一个主题

const theme = createMuiTheme({
  typography: {
    fontFamily: "verdana",
  },
});

然后我创建了一个单独的对象，在其中添加了我的变量：

const cssVariables = {
  shadowing: {
     boxShadow: "0 2px 5px -1px rgba(0, 0, 0, 0.3)",
  }
};

然后我将这两个对象传递给我的 ThemeProvider：

<ThemeProvider theme={{ ...theme, ...cssVariables }}>

最后，访问变量：

const useStyles = makeStyles(theme => ({
  workImage: {
    boxShadow: theme.shadowing.boxShadow,
  },
}));

【讨论】：