style children

[markbrown4]

I have a DropDown component which expects a ul in it's children for the options

<DropDown className='account-nav'>
  <img className='avatar' src='/static/avatars/me.jpg' />
  <ul className='align-right'>
    <li><a href>a</a></li>
    <li><a href>b</a></li>
    <li><a href>c</a></li>
  </ul>
</DropDown>

I was wanting to put these styles for the ul in the DropDown component itself but styled-jsx doesn't seem to support setting styles for the child components.

export default ({
  active,
  children
}) => (
  <div className={classNames('drop-down', { active })}>
    { children }
    <style jsx>{`
    .drop-down {
      position: relative;
      cursor: pointer;
    }
    .drop-down ul {
      position: absolute;
      z-index: 2;
      top: -9999px;
      left: 0;
      padding: 5px 0;
      background: #fff;
      border: 1px solid rgba(0,0,0, .1);
      box-shadow: 0 1px 2px rgba(0,0,0, .1);
    }
    .active ul {
      top: 100%;
    }
    .align-right {
      left: auto;
      right: 0;
    }
    a {
      display: block;
      padding: 3px 20px;
      color: #333;
      text-decoration: none;
      line-height: 1;
      white-space: nowrap;
    }
    a:hover {
      background: #eee;
    }
    `}</style>
  </div>
)

What do you think of this idea?

vue-loader supports this by not generating unique classes for each element but rather scoping css to a unique attribute on the root node that defines the style.

[markbrown4]

I can use <style jsx global> but then need to make selectors specific and scoped manually.

[thysultan]

You could use .drop-down :global(ul) global-selectors

[giuseppeg]

what @thysultan said (maybe use the child selector .drop-down > :global(ul)) or better make a List component and style it accordingly