css - 在 react 中使用 material ui 调用 css 类

Question

我想知道如何在使用 material-ui 的 react 中使用另一个 css 中的 css，因为我知道如果它使用 @extends 和 @mixin 使用 css 规则本身，我可以使用另一个 css 类，直到我发现 react 中的问题我正在使用 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 配置和版本