Seeking guidance on incorporating CSS within another CSS in React using Material-UI. Although I am familiar with using @extends and @mixin for applying CSS rules, I encountered a challenge when working with React and Material-UI. How can I address this issue? Below is my code snippet:
import React from 'react';
import TextField from '@material-ui/core/TextField';
import Paper from '@material-ui/core/Paper';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles(theme => ({
root: {
display: 'flex',
},
centerPosition: {
position: 'absolute',
left: '50%',
top: '50%',
transform: 'translate(-50%, -50%)'
},
boxField: {
display: 'flex',
margin: 'auto',
alignItems: 'center',
justifyContent: 'center'
},
paper: {
height: 500,
width: 500,
composes: centerPosition
},
form: {
composes: centerPosition
},
gridCompass: {
spacing: '0',
direction: 'column',
alignItems: 'center',
justify: 'center',
minHeight: '100vh'
}
}));
function Login() {
const classes = useStyles();
return (
<React.Fragment >
<Paper className={classes.paper.centerPosition}>
<form className={classes.form}>
<TextField id="outlined-basic" label="Email" variant="outlined" />
<br />
<TextField id="outlined-basic" label="Password" variant="outlined" />
</form>
</Paper>
</React.Fragment>
);
}
export default Login
Encountering an error related to centeredPosition while trying to use compose after reading some articles. Any suggestions on resolving this issue?