Passing style to child component without using global styles

I’ve got a child component, let’s call it Link.

This is the code for that:

import React from 'react';
import Link from 'next/link';

export default class CustomLink extends React.Component {
  render() {
    if (this.props.onClick) {
      return (
        <span className={this.props.className} onClick={this.props.onClick}>
          {this.props.children}
        </span>
      );
    }

    return (
      <Link
        href={this.props.href}
        params={this.props.params}
        as={this.props.as}>
        <a className={this.props.className}>{this.props.children}</a>
      </Link>
    );
  }
}

Now say that I import that component within another component, called Header

The code for that is:

import Link from './Link';

export default class Header extends React.Component {
  render() {
    return (
      <div className="root">
        <style jsx>{`
          .link {
            background-color: #fff;
            border-bottom: 1px solid #eee;
            color: #222;
          }
          `}
        </style>
       <Link className="link">Click me</Link>
    );
  }
}

However, unless I use <style jsx global>, then unfortunately the style doesn’t get passed to the child component.

I think a related issue is #197, but I haven’t seen any outcome or update on that issue since June.

Is there a solution to fixing this issue?

[giuseppeg]

what if Link comes from some npm module (e.g. a UI library), and I don’t have control over it?

That’s the main point, we’d have to figure out a way to control styles from the parent because passing a prop (eg. className) is an half baked solution that won’t work all the times.

As for now the best way to do this is to use .someSelectorInTheParentComponent > :global() from within the parent component eg.

<div className="root">
    <Link />
    <style jsx>{`
        .root > :global(a) { font-size: 60px }
     `}</style>
</div>

[a-ignatov-parc]

I’ve found a better workaround for this issue.

function HighlightedLink(props) {
  const {
    theme,
    children,
    ...otherProps,
  } = props;

  /**
   * `scope` element is needed to properly parse `style` element
   * and it could be any DOM element you want.
   */
  const scope = resolveScopedStyles((
    <scope>
      <style jsx>{`
        .link {
          background: ${theme.background};
        }
      `}</style>
    </scope>
  ));

  return (
    <Link
      {...otherProps}
      className={scope.wrapClassNames('link')}
    >
      {children}
      <scope.styles />
    </Link>
  );
}

function resolveScopedStyles(scope) {
  return {
    className: scope.props.className,
    styles: () => scope.props.children,
    wrapClassNames: (...classNames) => [scope.props.className, ...classNames].filter(Boolean).join(' '),
  };
}