在反应中使用材料ui调用css类

Question

我想知道如何在另一个 css 中使用 css 来使用 material-ui 进行反应，因为我知道如果它使用 @extends 和 @mixin 本身使用 css 规则，我可以使用另一个 css 类，直到我发现反应中的问题 我正在使用 materia-ui 并尝试使用 css 并尽可能使用 react 本身，但我不能使用 @extend 和 @mixin 如何解决？ 这是我的代码

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

如你所知，我在 centeredPosition 上遇到错误，因为我读了一些文章给我们撰写，但它没有用，我该如何解决这个问题？

Answer 1

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