在ReactJS中使用Material-UI只显示登录页面,可以按照以下步骤进行:
npm install react react-dom @material-ui/core
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Container, TextField, Button } from '@material-ui/core';
const useStyles = makeStyles((theme) => ({
container: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
marginTop: theme.spacing(8),
},
textField: {
marginBottom: theme.spacing(2),
},
button: {
marginTop: theme.spacing(2),
},
}));
const Login = () => {
const classes = useStyles();
return (
<Container maxWidth="xs" className={classes.container}>
<TextField
label="Username"
variant="outlined"
className={classes.textField}
/>
<TextField
label="Password"
type="password"
variant="outlined"
className={classes.textField}
/>
<Button
variant="contained"
color="primary"
className={classes.button}
>
Login
</Button>
</Container>
);
};
export default Login;
import React from 'react';
import ReactDOM from 'react-dom';
import Login from './Login';
ReactDOM.render(<Login />, document.getElementById('root'));
这样,你就可以在ReactJS中使用Material-UI只显示登录页面了。
关于Material-UI的更多信息和使用方法,你可以参考腾讯云的相关产品和文档:
请注意,以上链接仅供参考,具体的产品和文档可能会有所变化。
领取专属 10元无门槛券
手把手带您无忧上云