Recalling css class using material ui in react

Question

I would like to know how to use css inside another css in react using material-ui, as i know i can use another css class if it's using css rules itself using @extends and @mixin, until i found problem in react i'm using materia-ui and try to use css and using react itself as i can but i cant use @extend and @mixin How to solve that? this is my code

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

As you know i get an error on centeredPosition because i read some article to us compose, but it didn't work so how can i solve this?

Answer 1

您可以使用“react-css-modules”中的 CSSModules 并检查您的 webpack 配置和版本