Using custom components with styled-jsx

[ottobonn]

Hi there!

I just started out with styled-jsx and like it a lot. However, I was noticing that the styles I defined would not always take effect, and realized that I am unable to style custom components with hyphens in the name.

For example, here's a component I am trying to style:

export default function Test() {
  return (
    <my-test className="root">
      <style jsx>{`
        .root {
          margin: 0;
          width: 100%;
          height: 100%;
        }
      </style>
    </my-test>
  );
}

I can name the root element something like div or foo and the style will work, but if the name has a hyphen the style will not apply.

Are custom element names supported?

Thanks!

[brunocrosier]

Hey Otto, this is actually less of a Next.js issue, and more of a React.js issue.

You must always name your React.js components with a capital letter at the start, with no hyphens inside.

The reason for this, is because in JSX, all lower-case tag names are considered to be HTML tags (for example <div>, <img> etc.)

So, for this example you should change it to:

export default function Test() {
  return (
    <MyTest className="root">
      <style jsx>{`
        .root {
          margin: 0;
          width: 100%;
          height: 100%;
        }
      </style>
    </MyTest>
  );
}

Let me know if that helps :)

[ottobonn]

Thanks for the reply. I am actually not trying to write a new React component; I just want to use a custom HTML component for scoping styles and for clarity. So in this case, rather than using a div, I was hoping to use e.g. my-custom-wrapper.

I did some more digging and found that React treats custom components differently because it must pass className to them in case the developer wants to use that attribute. So for custom components in React, we have to use class instead.

So I suppose this is now more of a feature request than a help request :) It looks like styled-jsx checks for className here https://github.com/zeit/styled-jsx/blob/e02567939a261e451a3e953ae010a4e5ef062d3e/src/_utils.js#L38 but perhaps it could also handle class if the tag is a custom component.

Thanks,
Travis

[brunocrosier]

Maybe I'm misunderstanding, but you can't use class anywhere in JSX. Instead, you have to use className. This is because class is a reserved keyword in JavaScript

Therefore, I don't think it will be possible to have styled-jsx handle class`.

[ottobonn]

There is one special case in React for custom HTML tags, where it will pass through the attributes exactly as written, including class. Here's a thread with discussion about how it works facebook/react#4933 (comment).

I am interested in detecting the case where React recognizes the custom tag, and adding the class name to the class attribute rather than className.

The example I wrote above is incorrect; I didn't know the distinction at the time I wrote it. Instead, I would write my component like this, using class instead of className because this is a custom tag and has a hyphenated name:

export default function Test() {
  return (
    <my-test class="root">
      <style jsx>{`
        .root {
          margin: 0;
          width: 100%;
          height: 100%;
        }
      </style>
    </my-test>
  );
}

This component results in output something like

<my-test class="root" className="jsx-12345">

Where the class I added is passed through as class and styled-jsx is adding className as well, instead of modifying class.

[brunocrosier]

Ah I see, you want to use a web component here. Sorry i didn't understand it before.

So, you are right that the current solution that you posted won't work. I tried it out and there is a solution, although it's not the most pretty.

You can change your code to this:

export default function Test() {
  return (
    <my-test class="root">
      <style jsx global>{`
        .root {
          margin: 0;
          width: 100%;
          height: 100%;
        }
      </style>
    </my-test>
  );
}

the only change here is that we added global after style jsx

This means that it's added to a global stylesheet, rather than a locally scoped one. It's slightly less performant, but at least it works :)

[ottobonn]

Thanks for the workaround. While it does allow styling the element, I would be worried about losing the scoping of the CSS to the current component. I ended up opening a PR to fix this issue in styled-jsx (vercel/styled-jsx#647), and it's currently working for our app. I hope it helps someone!

[ottobonn]

I dug a bit more into the code and was able to tweak styled-jsx to support custom components. I hope it's useful; maybe it will even be merged! vercel/styled-jsx#647