# Material UI / React - withStyles() Error Message

**URL:** <https://forum.freecodecamp.org/t/material-ui-react-withstyles-error-message/350216>\
**Category:** General\
**Created:** [February 14, 2020, 2:23pm UTC](https://forum.freecodecamp.org/t/material-ui-react-withstyles-error-message/350216 "2020-02-14T14:23:05Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![mch\_omega](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/mch_omega/32/130532_2.png) [@mch\_omega](https://forum.freecodecamp.org/u/mch_omega)\
**Post date:** [February 14, 2020, 2:23pm UTC](https://forum.freecodecamp.org/t/material-ui-react-withstyles-error-message/350216/1 "2020-02-14T14:23:05Z")

</div>

I’ve trying to apply my variable styles with this: _withStyles_() component.

But I keep getting this error:

```auto
  Line 64:16: 'withStyles' is not defined no-undef

```

Anybody know what the problem might be?

Here is the code for my random quote machine.

```auto
import React from 'react';
import 'typeface-roboto';
import Grid from '@material-ui/core/grid';
import QuoteGenerator from './components/QuoteGenerator';

const styles = {
  container: {
    alignItems: "center"
  }
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      quotes: [],
      selectedQuoteIndex: null
    }
    //if a function uses this. -> we need to bind here to the construtor 
    this.selectQuoteIndex = this.generateNewQuoteIndex.bind(this);
    this.assignNewQuoteIndex = this.assignNewQuoteIndex.bind(this);
  }
  // ###PROPS###
  // set state needs to been done on a single line as this function is asynchronous
  componentDidMount() {
    fetch('https://gist.githubusercontent.com/natebass/b0a548425a73bdf8ea5c618149fe1fce/raw/f4231cd5961f026264bb6bb3a6c41671b044f1f4/quotes.json')
      .then(data => data.json())
      .then(quotes => this.setState({ quotes }, this.assignNewQuoteIndex)); //quotes:quotes object array 
  }

  get selectedQuote() { // can call this function as if it were a variable
    if (!this.state.quotes.length || !Number.isInteger(this.state.selectedQuoteIndex)) {
      // eslint-disable-next-line
      return; //undefined
    }
    return this.state.quotes[this.state.selectedQuoteIndex];
  } //returning the quote at the desired index
  /** 
  * Returns an integer representing an index in state.quotes
  **/
  generateNewQuoteIndex() {
    if (!this.state.quotes.length) {
      return; // undefined
    }
    return Math.floor(Math.random() * this.state.quotes.length - 1) + 1;
  }

  assignNewQuoteIndex() {
    this.setState({ selectedQuoteIndex: this.generateNewQuoteIndex() });
  }

  // render is run once state is updated
  render() {
    return (
      <Grid id="quote-box" justify="center" container>
        <Grid item>
          <QuoteGenerator selectedQuote={this.selectedQuote} assignNewQuoteIndex={this.assignNewQuoteIndex} />
        </Grid>
      </Grid>
    );
  }
}

export default withStyles(styles)(App);

```

---

<div class="post-metadata">

**Author:** ![mch\_omega](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/mch_omega/32/130532_2.png) [@mch\_omega](https://forum.freecodecamp.org/u/mch_omega)\
**Post date:** [February 15, 2020, 2:02am UTC](https://forum.freecodecamp.org/t/material-ui-react-withstyles-error-message/350216/3 "2020-02-15T02:02:11Z")

</div>

Thanks Randell!  
I imported withStyles as well as added className to Grid.  
Everything is working now 🙂

```auto
      <Grid className={this.props.classes.container} id="quote-box" justify="center" container>

```

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 7:35pm UTC](https://forum.freecodecamp.org/t/material-ui-react-withstyles-error-message/350216/4 "2021-06-01T19:35:36Z")

</div>

Closed on June 1, 2021, 7:35pm UTC