我想声明一些要在组件之间重用的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,
},
}));
但是它不起作用。
答案 0 :(得分:1)
“ createMuiTheme”功能接受具有有限键集的对象。(调色板,版式,间距等)
您只能使用普通对象。
const theme = {
shadowing: {
boxShadow: "0 2px 5px -1px rgba(0, 0, 0, 0.3)",
}
};
答案 1 :(得分:0)
就我而言,我必须同时使用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,
},
}));