title: how to use material-ui Dialog PaperProps
body: <p>I'm using v1.1.0 of material-ui in React 16.3.2. I'm trying to create a landing page similar to <a href="https://material-ui.com/discover-more/showcase/" rel="noreferrer">Showcase - Local Insights</a></p>
  
  <p>where the dialog has opacity (Find foreclosures). I'm trying to use PaperProps for Dialog component described here <a href="https://material-ui.com/api/dialog/" rel="noreferrer">Dialog doc</a></p>
  
  <p>Here's a component I've created to try to do this.</p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import { withStyles } from '@material-ui/core/styles';
  
  import Button from '@material-ui/core/Button';
  
  import Dialog from '@material-ui/core/Dialog';
  import DialogActions from '@material-ui/core/DialogActions';
  import DialogContent from '@material-ui/core/DialogContent';
  import DialogTitle from '@material-ui/core/DialogTitle';
  
  import ForwardIcon from '@material-ui/icons/Forward';
  
  import Input from '@material-ui/core/Input';
  import FormControl from '@material-ui/core/FormControl';
  import Slide from '@material-ui/core/Slide';
  
  
  const styles = theme =&gt; ({
    dialogPaper: {
      opacity: 0.5,
      border: '#FF0000 1px solid',
    },
    button: {
      margin: '30px'
    }
  });
  
  function Transition(props) {
    return &lt;Slide direction="up" {...props} /&gt;;
  }
  
  class SignInDialog extends React.Component {
    state = {
      open: false,
      username: ''
    };
  
    handleClickOpen = () =&gt; {
      this.setState({ open: true });
    };
  
    handleClose = () =&gt; {
      this.setState({ open: false });
    };
  
    handleChange = name =&gt; event =&gt; {
      this.setState({
        [name]: event.target.value,
      });
    };
  
    render() {
      const { classes } = this.props;
  
      return (
        &lt;div&gt;
          &lt;Button variant="fab" color="primary" aria-label="add" className={classes.button} onClick={this.handleClickOpen}&gt;
            &lt;ForwardIcon /&gt;
          &lt;/Button&gt;
          &lt;Dialog
            PaperProps={styles.dialogPaper}
            open={this.state.open}
            TransitionComponent={Transition}
            onClose={this.handleClose}
            aria-labelledby="form-dialog-title"
          &gt;
            &lt;DialogTitle id="form-dialog-title"&gt;WELCOME&lt;/DialogTitle&gt;
            &lt;DialogContent&gt;
              &lt;p&gt;SIGN IN&lt;/p&gt;
              &lt;FormControl className={classes.formControl}&gt;
                &lt;Input
                  value={this.state.searchString}
                  onChange={this.handleChange('search')}
                  id="siginin-input"
                  placeholder="Enter your username"
                /&gt;
              &lt;/FormControl&gt;
            &lt;/DialogContent&gt;
            &lt;DialogActions&gt;
              &lt;Button onClick={this.handleClose} color="primary"&gt;
                Cancel
              &lt;/Button&gt;
              &lt;Button onClick={this.handleClose} color="primary"&gt;
                Continue
              &lt;/Button&gt;
            &lt;/DialogActions&gt;
          &lt;/Dialog&gt;
        &lt;/div&gt;
      );
    }
  }
  
  SignInDialog.propTypes = {
    classes: PropTypes.object.isRequired,
  };
  
  export default withStyles(styles)(SignInDialog);
  </code></pre>
  
  <p>I haven't been able to figure out how to get the Dialog to take the styles. What is needed to get PaperProps to work?</p>