Target styles of children components

[Tomekmularczyk]

Hey I started to use styled-jsx with React-Boostrap and I'm having some troubles styling components.

I want to add/override some styles of .navbar-header class but code below doesnt work:

Even if I add custom class to Boostrap component styles doesn't apply either:

The only solution I came up with is adding global styling, but this seems (to me at least) wrong.

Is there something I do wrong, or this is how it should be in a first place?

P.S I couldn't paste code with proper formatting and I made screenshots.

REPO: https://github.com/Tomekmularczyk/styled-jsx-test

[giuseppeg]

did you try to set the class via the className attribute? in js class is a reserved word

[Tomekmularczyk]

@giuseppeg I use babel-plugin-react-html-attrs

[giuseppeg]

fair enough but does the element get the class?

[Tomekmularczyk]

@giuseppeg jest it does.

[giuseppeg]

@Tomekmularczyk can you put together a test repo?

[Tomekmularczyk]

@giuseppeg I will do that later.

[Tomekmularczyk]

@giuseppeg I have created test repository. I've included link to my original question above.

[giuseppeg]

@Tomekmularczyk thanks. Your component doesn't have any div there.

Here's what you could do:

// in NavBar.jsx
import uuid from 'uuid'

const uniqueClass = uuid()

export default (props) => (
  <Navbar class="NavBar">
    <Navbar.Header class={uniqueClass} />
    <style jsx>{`
      :global(.${uniqueClass}) {
        color: red !important;
        background-color: red !important;
        padding: 100px !important;
      }
    `}</style>
  </Navbar>
)

[Tomekmularczyk]

Thanks @giuseppeg somehow I couldn't get this working the first time. But is it possible to target nested elements/classess of Components? for example if wanted to target:

:global(.${uniqueClass}) > a ??

I also found another small issue:

const bsSM = '@media screen and (min-width: 567px)';

${bsSM} { :global(.my-class) { color: red !important; } }

I have updated repo master branch with these two examples.

[giuseppeg]

try :global(.${uniqueClass} > a) and

const bsSM = '(min-width: 567px)';
@media screen and ${bsSM} { :global(.my-class) { color: red !important; } }

[Tomekmularczyk]

second example worked even with const bsSM = 'screen and (min-width: 768px)'; (which is closer to what I wanted to achieve).

Hovewer first example didn't work :/

[philippe-git]

Joining the conversation after trying a similar approach to pass a set of classes to a third-party component that's compatible with CSS Modules :)

Thanks for your help on this one @giuseppeg! This approach seems to have two issues:

1. Valid class names must not start with a digit, but uuid() will sometimes start with one. Solved with a small wrapper:

   const getUniqueClassName = () => `a${uuid()}`

2. This is due to SSR. When passing a unique classname through :global() like shown above (i.e. when the unique class name is generated outside the render() function), the styles are generated server-side and are passed down to the client – from the first server-side import to the client-side, that unique class name remains the same.

   At the same time, once on the client side, importing this same component will lead to another execution of the module's code, hence another run of uuid(), hence a different class name being passed to the component. Note that this won't update the <style>. The two are out of sync, so that doesn't work.

   Moving the classname generation inside the render() method to have the two always in sync doesn't work, it throws Syntax Error: Expected classNames to not come from the closest scope.

   A solution that feels like a hammer could be to use a store that's shared across server and client (e.g. a Redux store) and generate a bunch of class names on init that will remain the same throughout the app's lifecycle.

   What do you think? If there's a more elegant solution, I'd love to hear it :)

[giuseppeg]

@pioul yup good points, mine was just a POF.
Obviously the unique class name generation should be deterministic.

[philippe-git]

@giuseppeg 👍 now that I think about it, hashing a pre-determined class name instead of using uuid should work great!

[Tomekmularczyk]

This makes it little cumbersome to work with third-party components and writing :global all over the place...