className syntax in Redux
<p>I am currently learning React and Redux. I have forked a boilerplate, and currently I am looking through all of the code to see how it fits together.</p>

<p>While scanning through some React Component files I found something very interesting! When setting <code>className</code> for many of the elements the syntax they use differs. The first time they use the following syntax:</p>

<pre><code>&lt;span className={classes['counter--green']}&gt;
    ...
&lt;/span&gt;
</code></pre>

<p>Then this syntax:</p>

<pre><code>&lt;button className='btn btn-default'&gt;
    ...
&lt;/button&gt;
</code></pre>

<p>And from there on out they use the following:</p>

<pre><code>&lt;h2 className={classes.counterContainer}&gt;
    ...
&lt;/h2&gt;
</code></pre>

<p>At the top of the file they import <code>classes</code> with the following:</p>

<pre><code>import classes from './Counter.scss'
</code></pre>

<p>So simply my question is, <strong>why are there three different syntax for className, and which one is correct</strong>?</p>