title: Material UI Styles Not Rendering
body: <p>Im attempting to build a website using Material-UI and React. When attempting to use Material-UI's styling via the Hook API, it works online in codesandbox.io but does not work locally when I run it. The border radius property does not seem to update, nor do any of the properties in the button or instruction object</p>
  
  <p><a href="https://i.stack.imgur.com/Qby6T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qby6T.png" alt="What I see when I run the same code locally"></a></p>
  
  <pre><code>import React from 'react';
  import { makeStyles } from '@material-ui/styles';
  import Stepper from '@material-ui/core/Stepper';
  import Step from '@material-ui/core/Step';
  import StepLabel from '@material-ui/core/StepLabel';
  import Button from '@material-ui/core/Button';
  import Typography from '@material-ui/core/Typography';
  
  const useStyles = makeStyles({
    root: {
      width: "100%"
    },
    button: {
      marginRight: 10,
      borderRadius: 100,
      fontSize: 20,
    },
    instructions: {
      marginTop: 2,
      marginBottom: 5
    }
  });
  
  function getSteps() {
    return ['Select campaign settings', 'Create an ad group', 'Create an ad'];
  }
  
  function getStepContent(step) {
    switch (step) {
      case 0:
        return 'Select campaign settings...';
      case 1:
        return 'What is an ad group anyways?';
      case 2:
        return 'This is the bit I really care about!';
      default:
        return 'Unknown step';
    }
  }
  
  function HorizontalLinearStepper() {
    const classes = useStyles();
    const [activeStep, setActiveStep] = React.useState(0);
    const [skipped, setSkipped] = React.useState(new Set());
    const steps = getSteps();
  
    function isStepOptional(step) {
      return step === 1;
    }
  
    function isStepSkipped(step) {
      return skipped.has(step);
    }
  
    function handleNext() {
      let newSkipped = skipped;
      if (isStepSkipped(activeStep)) {
        newSkipped = new Set(newSkipped.values());
        newSkipped.delete(activeStep);
      }
  
      setActiveStep(prevActiveStep =&gt; prevActiveStep + 1);
      setSkipped(newSkipped);
    }
  
    function handleBack() {
      setActiveStep(prevActiveStep =&gt; prevActiveStep - 1);
    }
  
    function handleSkip() {
      if (!isStepOptional(activeStep)) {
        // You probably want to guard against something like this,
        // it should never occur unless someone's actively trying to break something.
        throw new Error("You can't skip a step that isn't optional.");
      }
  
      setActiveStep(prevActiveStep =&gt; prevActiveStep + 1);
      setSkipped(prevSkipped =&gt; {
        const newSkipped = new Set(prevSkipped.values());
        newSkipped.add(activeStep);
        return newSkipped;
      });
    }
  
    function handleReset() {
      setActiveStep(0);
    }
  
    return (
      &lt;div className={classes.root}&gt;
        &lt;Stepper activeStep={activeStep}&gt;
          {steps.map((label, index) =&gt; {
            const stepProps = {};
            const labelProps = {};
            if (isStepOptional(index)) {
              labelProps.optional = &lt;Typography variant="caption"&gt;Optional&lt;/Typography&gt;;
            }
            if (isStepSkipped(index)) {
              stepProps.completed = false;
            }
            return (
              &lt;Step key={label} {...stepProps}&gt;
                &lt;StepLabel {...labelProps}&gt;{label}&lt;/StepLabel&gt;
              &lt;/Step&gt;
            );
          })}
        &lt;/Stepper&gt;
        &lt;div&gt;
          {activeStep === steps.length ? (
            &lt;div&gt;
              &lt;Typography className={classes.instructions}&gt;
                All steps completed - you&amp;apos;re finished
              &lt;/Typography&gt;
              &lt;Button onClick={handleReset} className={classes.button}&gt;
                Reset
              &lt;/Button&gt;
            &lt;/div&gt;
          ) : (
            &lt;div&gt;
              &lt;Typography className={classes.instructions}&gt;{getStepContent(activeStep)}&lt;/Typography&gt;
              &lt;div&gt;
                &lt;Button disabled={activeStep === 0} onClick={handleBack} className={classes.button}&gt;
                  Back
                &lt;/Button&gt;
                {isStepOptional(activeStep) &amp;&amp; (
                  &lt;Button
                    variant="contained"
                    color="primary"
                    onClick={handleSkip}
                    className={classes.button}
                  &gt;
                    Skip
                  &lt;/Button&gt;
                )}
                &lt;Button
                  variant="contained"
                  color="primary"
                  onClick={handleNext}
                  className={classes.button}
                &gt;
                  {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
                &lt;/Button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          )}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default HorizontalLinearStepper;
  </code></pre>
  
  <p>You can view the expected results here: <a href="https://98m6j7m314.codesandbox.io" rel="nofollow noreferrer">https://98m6j7m314.codesandbox.io</a>
  in which the buttons border is circular after applying the borderRadius property</p>