在不需要使用组件的情况下使用Material UI,可以使用其提供的样式和主题功能。下面是一个使用Material UI样式和主题的代码示例:
import { makeStyles, createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
// 创建样式
const useStyles = makeStyles((theme) => ({
root: {
backgroundColor: theme.palette.primary.main,
color: theme.palette.text.primary,
padding: theme.spacing(2),
},
}));
// 创建主题
const theme = createMuiTheme({
palette: {
primary: {
main: '#00bcd4',
},
text: {
primary: '#fff',
},
},
});
function App() {
const classes = useStyles();
return (
Hello, Material UI!
);
}
export default App;
在上面的示例中,我们使用makeStyles
函数创建了一个样式类classes
,并在根div
元素上应用了该样式。然后,我们使用createMuiTheme
函数创建了一个自定义主题theme
,并将其作为ThemeProvider
的theme
属性传递给应用程序的根组件。这样,我们就可以在应用程序中使用Material UI的样式和主题。
请注意,虽然在此示例中没有使用Material UI的组件,但我们仍然需要从@material-ui/core/styles
导入相关的函数和组件。
上一篇:不需要使用webpack等模块。
下一篇:不需要使用“as”关键字的元组