Material-UI 应用 backgroundColor 不起作用

Posted 2023-02-22

【中文标题】Material-UI 应用 backgroundColor 不起作用

【英文标题】：Material-UI applying backgroundColor does not work

【发布时间】：2020-07-09 10:04:53

【问题描述】：

我有这段代码为我的网格应用背景颜色，它一直工作到今天......它是黑色的，现在它变成了白色，我无法更改根元素的背景颜色。

是否有任何代码可以覆盖它？

我从这里得到代码

https://github.com/mui-org/material-ui/blob/master/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js

const useStyles = makeStyles(theme => (
  root: 
    height: '100%',
    width: '100%',
    backgroundColor: 'black'
  ,

 <Grid container component='main' className=classes.root>

// 完整代码

import React,  useState  from 'react';
import  connect  from 'react-redux';

import history from '../../../history';
import  requestSignIn  from '../../../store/actions';
// import  Button, Container, Row, Col, FormControl, Dropdown  from 'react-bootstrap'

import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Link from '@material-ui/core/Link';
import Paper from '@material-ui/core/Paper';
import Box from '@material-ui/core/Box';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import  makeStyles  from '@material-ui/core/styles';

import Logo from '../../../../public/images/ic-logo-dark.png';


const useStyles = makeStyles(theme => (
  root: 
    height: '100%',
    width: '100%',
    backgroundColor: 'black'
  ,
  image: 
    backgroundImage:
      'url(https://media.giphy.com/media/kz76j0UjtPoE4WyhQn/giphy.gif)',
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
    backgroundPosition: 'center'
  ,
  paper: 
    margin: theme.spacing(8, 4),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center'
  ,
  avatar: 
    margin: theme.spacing(1)
  ,
  form: 
    width: '100%', // Fix IE 11 issue.
    marginTop: theme.spacing(1),
    color: 'orange'
  ,
  submit: 
    margin: theme.spacing(3, 0, 2)
  
));

function Login() 

  const classes = useStyles();
  const [inputs, setInputs] = useState(
    login: '',
    password: ''
  )
  const [keepLogged, setKeepLogged] = useState(false)

  const  login, password  = inputs

  function handleChange(e) 
    e.preventDefault();
    const  name, value  = e.target;
    setInputs(inputs => ( ...inputs, [name]: value ));
    console.log(`$login`)
  

  const loginUser = () => 
    const  login, password  = this.inputs;
    const  requestSignIn  = this.props;

    requestSignIn( login, password );
  ;

  return (
    <Grid container component='main' className=classes.root>
      <CssBaseline />
      <Grid item xs=false sm=4 md=7 className=classes.image />
      <Grid item xs=12 sm=8 md=5 component=Paper elevation=6 square>
        <div className=classes.paper>
          <div>
            <img src=Logo style= width: 300  />
          </div>
          <Typography component='h1' variant='h5'>
            Sign in
          </Typography>
          <form className=classes.form noValidate>
            <TextField
              variant='outlined'
              margin='normal'
              required
              fullWidth
              id='email'
              label='Email Address'
              value=login
              onChange=e => handleChange(e)
              name='login'
              autoComplete='email'
              autoFocus
            />
            <TextField
              variant='outlined'
              margin='normal'
              required
              fullWidth
              name='password'
              label='Password'
              value=password
              onChange=e => handleChange(e)
              type='password'
              id='password'
              autoComplete='current-password'
            />
            <FormControlLabel
              control=<Checkbox value='remember' color='primary' />
              label='Remember me'
            />
            <Button
              type='submit'
              fullWidth
              variant='contained'
              color='primary'
              value='Log In'
              className=classes.submit
              onClick=() => this.loginUser
            >
              Sign In ????
            </Button>
            <Grid container>
              <Grid item xs>
                <Link href='#' variant='body2'>
                  Forgot password?
                </Link>
              </Grid>
              <Grid item>
                <Link
                  variant='body2'
                  onClick=() => history.push('/registration')
                >
                  "Don't have an account? Sign Up"
                </Link>
              </Grid>
            </Grid>
            <Box mt=5>
              <Copyright />
            </Box>
          </form>
        </div>
      </Grid>
    </Grid>
  );


const mapDispatchToProps = dispatch => (
  requestSignIn: data => dispatch(requestSignIn(data))
);

export default connect(null, mapDispatchToProps)(Login);

【问题讨论】：

你能发布你的完整代码吗？

我刚刚添加了完整的代码！

【参考方案1】：

在 useStyles 中声明一个新样式

const useStyles = makeStyles(theme => (
  color: 
  backgroundColor: 'black'
  

并将此样式应用于您的第三个网格。

  <Grid container component='main' className=classes.root>
   <CssBaseline />
   <Grid item xs=false sm=4 md=7 className=classes.image />
   <Grid
     item
     xs=12
     sm=8
     md=5
     component=Paper
     elevation=6
     square
     className=classes.color
   >

【参考方案2】：

我也有同样的问题。其他一切都在工作，但 letterSpacing 和 backgroundColor 不工作。 但是如果我输入 style=color: 'white', backgroundColor: '#e91e63'，它就可以了。

 <Card className=classes.cardStyle style= color: 'white', backgroundColor: '#e91e63' >
    ABC </Card>