title: How to target siblings / children of complex component in Material UI/JSS
body: <p>I'm using Material UI currently in my project. It's working well, but one thing that I can't figure out is how to style child and sibling components using JSS.</p>
  
  <p>For example, Material UI's  component renders out to something like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="MuiFormControl-root-36 MuiFormControl-marginNormal-37"&gt;
     &lt;label class="MuiFormLabel-root-45 MuiInputLabel-root-40 MuiInputLabel-formControl-41 MuiInputLabel-animated-44 MuiInputLabel-shrink-43" data-shrink="true"&gt;Field label&lt;/label&gt;
     &lt;div class="MuiInput-root-52 MuiInput- 
          formControl-53"&gt;&lt;input aria-invalid="false" class="MuiInput-input-60" 
          name="fieldname" type="text" value=""&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>From the <a href="https://material-ui.com/api/text-field/" rel="nofollow noreferrer">Material UI documentation</a> I know that  is just a wrapper for some of the lower level components. I can target these individual components using <code>createMuiTheme()</code> like this:</p>
  
  <pre class="lang-javascript prettyprint-override"><code>MuiInput: {
          formControl: {
              'label + &amp;': {
                  marginTop: '30px'
              }
          },
          root: {
              '&amp;$focused': {
                  boxShadow: '0px 3px 8px rgba(108, 108, 108, 0.16)'
              },
              borderRadius: '40px',
              padding: '7px 16px',
              background: 'white',
              transition: 'box-shadow 0.2s',
          }
      }
  </code></pre>
  
  <p>What I don't understand is how to target children and/or siblings in these components - for example, in my <code>createMuiTheme</code> function, how can I target the MuiFormLabel component that is inside the MuiFormControl component? Or, how can I target the MuiInput component if the MuiFormLabel component has a certain class? I know I can target the <em>element</em> using normal CSS (e.g. '&amp; label') but I don't know how to target the component/class since the class names are dynamic.</p>