材质UI全局CSS变量 [英] Material UI global css variables

问题描述

我想声明一些要在各个组件之间重用的css变量.这是使用普通CSS的方法:

I would like to declare some css variables that I will reuse among my components. This is how you do it with plain css:

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

然后将其按如下方式使用:

That would then be used as follows:

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

如何通过useStyles实现相同的目的?我无济于事地尝试了以下方法:

How can I achieve the same with useStyles? I tried the following with no avail:

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

我的主应用包含在其中

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

我尝试在组件中使用它:

I tried using it in my component:

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

但是它不起作用.

推荐答案

"createMuiTheme"函数接受键集有限的对象.(调色板，版式，间距等)

"createMuiTheme" function accepts object with limited set of keys.(palette, Typography, spacing...etc)

您只能使用普通对象.

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

这篇关于材质UI全局CSS变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！