title: react className not defined in a switch statement
body: <p>I'm using a switch statement to render a component dynamically.
  Anywhere the className attribute is used i get the error className is not defined and ingredient will always be null
  if i remove the className attribute then it works fine   </p>
  
  <pre><code>
  import React from 'react';
  import classes from 'C:/Users/oluad/Desktop/my-burger-appp/src/Components/BugerIngredient/BurgerIngredient.css'
  import PropTypes from 'prop-types';
  
  
   const BurgerIngredient = (props) =&gt; {
  
      let ingredient = null;
  
          switch(props.type){
              case('bread-bottom'):
              ingredient = &lt;div className="dave"&gt;&lt;/div&gt;;
              break;
              case('Bread-top'):
              ingredient =&lt;div className={classes.BreadTop}&gt;&lt;/div&gt;
              break
              case('Meat'):
              ingredient=&lt;div&gt;NO CLASSNAME !!!  WORKS FINE&lt;/div&gt;
              break
              case('Cheese'):
              ingredient=&lt;div className={classes.Cheese} &gt;&lt;/div&gt;
              break
              case('Salad'):
              ingredient=&lt;div className={classes.Salad} &gt;&lt;/div&gt;
              break
              case('Bacon'):
              ingredient= &lt;div className={classes.Bacon}&gt;&lt;/div&gt;
              break
              case("bread-top"):
              ingredient=&lt;div className={classes.BreadTop}&gt;
                              &lt;div className={classes.Seeds1}&gt;&lt;/div&gt;
                              &lt;div className={classes.seeds2}&gt;&lt;/div&gt;
                          &lt;/div&gt;
                          break
              default:
              ingredient=null
          }
  
  
     return  ingredient
  }
  
  BurgerIngredient.PropTypes = {
           type: PropTypes.string
       };
  
   export default BurgerIngredient 
  
  
  </code></pre>
  
  <p>This is the css file im using BurgerIngredient.css
     Im using css modules </p>
  
  <pre><code>.BreadBottom {
      height: 13%;
      width: 80%;
      background: linear-gradient(#F08E4A, #e27b36);
      border-radius: 0 0 30px 30px;
      box-shadow: inset -15px 0 #c15711;
      margin: 2% auto;
  }
  
  .BreadTop {
      height: 20%;
      width: 80%;
      background: linear-gradient(#bc581e, #e27b36);
      border-radius: 50% 50% 0 0;
      box-shadow: inset -15px 0 #c15711;
      margin: 2% auto;
      position: relative;
  }
  
  .Seeds1 {
      width: 10%;
      height: 15%;
      position: absolute;
      background-color: white;
      left: 30%;
      top: 50%;
      border-radius: 40%;
      transform: rotate(-20deg);
      box-shadow: inset -2px -3px #c9c9c9;
  }
  
  .Seeds1:after {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      background-color: white;
      left: -170%;
      top: -260%;
      border-radius: 40%;
      transform: rotate(60deg);
      box-shadow: inset -1px 2px #c9c9c9;
    }
  
  .Seeds1:before {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      background-color: white;
      left: 180%;
      top: -50%;
      border-radius: 40%;
      transform: rotate(60deg);
      box-shadow: inset -1px -3px #c9c9c9;
    }
  
    .Seeds2 {
      width: 10%;
      height: 15%;
      position: absolute;
      background-color: white;
      left: 64%;
      top: 50%;
      border-radius: 40%;
      transform: rotate(10deg);
      box-shadow: inset -3px 0 #c9c9c9;
    }
  
    .Seeds2:before {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      background-color: white;
      left: 150%;
      top: -130%;
      border-radius: 40%;
      transform: rotate(90deg);
      box-shadow: inset 1px 3px #c9c9c9;
    }
  
  
  .Meat {
      width: 80%;
      height: 8%;
      background: linear-gradient(#7f3608, #702e05);
      margin: 2% auto;
      border-radius: 15px;
  }
  
  .Cheese {
      width: 90%;
      height: 4.5%;
      margin: 2% auto;
      background: linear-gradient(#f4d004, #d6bb22);
      border-radius: 20px;
  }
  
  .Salad {
      width: 85%;
      height: 7%;
      margin: 2% auto;
      background: linear-gradient(#228c1d, #91ce50);
      border-radius: 20px;
  }
  
  .Bacon {
      width: 80%;
      height: 3%;
      background: linear-gradient(#bf3813, #c45e38);
      margin: 2% auto;
  }
  </code></pre>