Javascript 材质UI全局css变量
我想声明一些css变量,我将在我的组件中重用它们。以下是使用纯css的方法:Javascript 材质UI全局css变量,javascript,css,reactjs,material-ui,css-in-js,Javascript,Css,Reactjs,Material Ui,Css In Js,我想声明一些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: { bo
: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>
但它不起作用。“CreateMuiteme”函数接受具有有限键集的对象。(调色板、排版、间距…等)
您可以只使用普通对象
const theme = {
shadowing: {
boxShadow: "0 2px 5px -1px rgba(0, 0, 0, 0.3)",
}
};
在我的例子中,我必须同时使用CreateMuiteme和自定义变量。为了实现这一目标,我做了如下工作 首先,我用CreateMuiteme创建了一个主题
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 }}>
<ThemeProvider theme={{ ...theme, ...cssVariables }}>
const useStyles = makeStyles(theme => ({
workImage: {
boxShadow: theme.shadowing.boxShadow,
},
}));