title: Customizing children components' styles through parent with JSS
body: <p>I'm currently working on a project which has all of its styles declared in JSS. One of the &quot;benefits&quot; highlighted on many articles and the library docs is that it encapsulates styles. However I really am having a hard time customizing them, specially when it comes to styling that depends on the component's surrounding context (by context I mean parent elements, siblings, etc.).</p>
  <p>Consider the following styles exported along a component called <code>FieldDescriptor</code> via the <code>withStyles</code> HOC:</p>
  <pre><code>info: {
  fontFamily: theme.typography.fontFamily.light,
  fontSize: &quot;12px&quot;,
  padding: &quot;0 24px 8px 24px&quot;,
  letterSpacing: 0.3,
  </code></pre>
  <p>},</p>
  <p>This class will be found as <code>FieldDescriptor-info-xxx</code> on the element having that class. Now suppose that this component is child to another one that attempts to target the <code>error</code> class. You could target that class with something like <code>[class*=FieldDescriptor-error]</code> (personally I already consider this a very unclean approach) and it will work <strong>only</strong> on a development environment.</p>
  <p>On production, classes will become unique (e.g. jss-xxx) and selectors like the one above will no longer be useful. My question is, what is the cleanest or &quot;correct&quot; approach to customizing component styles like this in JSS? I am either missing something really obvious or perhaps facing the limitations of JSS.</p>
  <p>I am looking forward to solutions that do not require more tooling or code bloating, that would really miss the purpose of adopting JSS in the first place.</p>
  <p>You can find an example using both <code>withStyles</code> and <code>useStyles</code> <a href="https://codesandbox.io/s/customizing-in-jss-material-ui-r7lko" rel="nofollow noreferrer">here</a></p>