title: How to define className in styled components
body: <p>I'm busy refactoring a React project to use styled components. It's currently using SASS. So, I've got a working component:</p>
  
  <pre><code>import React from 'react';
  import styled from 'styled-components';
  
  const MainNavDiv = styled.div`
    display: none;
    font-weight: 300;
    font-size: 1.7rem;
    background-color: #F5F5F5;
    grid-column: 1 / span 2;
    grid-row: 2 / span 1;
    border-top: #D3D3D3 solid 1px;
    border-bottom: #D3D3D3 solid 1px;
    z-index: 3;
    @media (min-width: 51rem) {
      display: block;
    }
  `;
  
  const Ul = styled.ul`
    list-style-type: none;
    margin: 0;
    padding: 0;
  `;
  
  const Li = styled.li`
    border-bottom: 1px dotted #D3D3D3;
    text-indent: 3rem;
    padding: .5rem 0 .5rem 0;
    height: 2.1rem;
    &amp; :last-child {
      border: none;
    }
    &amp; a {
      text-decoration: none;
      color: #000;
      WebkitTransition: text-indent 0.5s ease, color 0.5s ease;
      MozTransition: text-indent 0.5s ease, color 0.5s ease;
      transition: text-indent 0.5s ease, color 0.5s ease;
      display: block;
      width: 200px;
    }
    &amp; :hover {
      text-indent: 4rem;
      &amp; a {
        color: $secondary-color;
      }
    }
    &amp; span {
      font-size: 1.3rem;
    }
  `;
  
   const MainNav = (props) =&gt; {
      return (
        &lt;MainNavDiv&gt;
          &lt;Ul&gt;
            &lt;Li className={props.linkIndentHome}&gt;&lt;a href="#" onClick={props.homeContent}&gt;HOME&lt;/a&gt;&lt;/Li&gt;
            &lt;Li className={props.linkIndentSonata}&gt;&lt;a href="#" onClick={props.sonataContent}&gt;SONATAS &lt;span&gt;(adults)&lt;/span&gt;&lt;/a&gt;&lt;/Li&gt;
            &lt;Li className={props.linkIndentIntermezzo}&gt;&lt;a href="#" onClick={props.intermezzoContent}&gt;INTERMEZZI &lt;span&gt;(adults)&lt;/span&gt;&lt;/a&gt;&lt;/Li&gt;
            &lt;Li className={props.linkIndentSonatina}&gt;&lt;a href="#" onClick={props.sonatinaContent}&gt;SONATINA &lt;span&gt;(Children)&lt;/span&gt;&lt;/a&gt;&lt;/Li&gt;
            &lt;Li className={props.linkIndentDatesFees}&gt;&lt;a href="#" onClick={props.datesFeesContent}&gt;DATES &amp; FEES&lt;/a&gt;&lt;/Li&gt;
            &lt;Li className={props.linkIndentLive}&gt;&lt;a href="#" onClick={props.liveContent}&gt;LIVE! &amp; CHAT&lt;/a&gt;&lt;/Li&gt;
            &lt;Li className={props.linkIndentVideoArchive}&gt;&lt;a href="#" onClick={props.videoArchiveContent}&gt;VIDEO ARCHIVE&lt;/a&gt;&lt;/Li&gt;
            &lt;Li className={props.linkIndentGeneral}&gt;&lt;a href="#" onClick={props.generalContent}&gt;GENERAL&lt;/a&gt;&lt;/Li&gt;
            &lt;Li className={props.linkIndentMisc}&gt;&lt;a href="#" onClick={props.miscContent}&gt;MISC&lt;/a&gt;&lt;/Li&gt;
          &lt;/Ul&gt;
        &lt;/MainNavDiv&gt;
      )
   };
  
  export default MainNav;
  </code></pre>
  
  <p>Each Li component is importing a prop from the parent that attaches a class. For example, the first list item will indent that list item when clicked and un-indent all the other list items. This is all kept in the parent state. All good so far. Right now, this indented class is defined in a scss file:</p>
  
  <pre><code>.main-nav__indented {
    border-bottom: 1px dotted $secondary-color !important;
    &amp; a {
      text-indent: 5rem;
      color: $secondary-color !important;
    }
  }
  </code></pre>
  
  <p>I don't want to keep that scss file harboring that indented class. It should be defined somewhere in my MainNavDiv component so I can dropkick that scss file out of my project. But I'm confused on how to implement it. </p>
  
  <p>Can I use the 'attrs' method somehow?:</p>
  
  <pre><code>const MainNavDiv = styled.div.attrs({
    className = // something here
  })`
    display: none...
    ...
  `;
  </code></pre>
  
  <p>How and where do I define the main-nav__indented class other than inside a scss file?</p>