Question

我想知道如何使用material-ui在另一个css中使用css进行反应，因为我知道如果我使用@extends和@mixin本身的css规则，则可以使用另一个css类，直到我发现react中的问题我正在使用materia-ui并尝试使用CSS并尽可能地使用自身反应，但我不能使用@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的配置和版本

在React中使用材质UI调用CSS类

1 个答案: