Using styled-jsx, how can I use styles on JSX stored in a variable?

Question

I am using a variable to conditionally show different JSX and it isn't using the styling that is defined in its parent function. How can I make that work?

You can see a demo here: https://codesandbox.io/s/styled-jsx-example-e6tf6

import React from 'react'

function StyledJsxTest({ isLoggedIn, areButtonsVisible }) {
  function renderButtons() {
    const buttons = isLoggedIn ? (
      <a className="button" href="/dashboard">Dashboard</a>
    ) : (
      <>
        <a className="button" href="/signIn">Log In</a>
      </>
    )

    return (
      <div>
        <div>
          <a className="button" href="/dashboard">Test</a>
          {buttons}
        </div>
        <style jsx>{`
          .button {
            background-color: blue;
            color: white;
            padding: 20px;
            margin: 10px;
          }
        `}
        </style>
      </div>
    )
  }

  return (
    <div>
      <h1>This is a headline</h1>
      {renderButtons()}
    </div>
  )
}

export default StyledJsxTest

The buttons in this chunk of code are not getting the . button rule. How can i get those to work?

const buttons = isLoggedIn ? (
      <a className="button" href="/dashboard">Dashboard</a>
    ) : (
      <>
        <a className="button" href="/signIn">Log In</a>
      </>
    )

Matt Carlotta · Answer 1 · 2019-12-09T06:06:43.423

1

My guess would be that you forgot to add styled-jsx/babel to your .babelrc configuration.

Working example:

edited Dec 09 '19 at 06:06

answered Dec 09 '19 at 05:56

Matt Carlotta

18,972
4
39
51

Thanks for your reply Matt. I actually do have that set up. I checked out your demo and I think you may have misunderstood my question. I forked your demo and set it up with the way I am trying to use it and it's not working there :( https://codesandbox.io/s/styled-jsx-example-e6tf6 – zeckdude Dec 09 '19 at 06:09
1

Ahhh, I see. What's your intention of storing it in a variable? – Matt Carlotta Dec 09 '19 at 06:12
So my example is ofcourse simplified, but sometimes when there are if/else statements to conditionally render JSX, I like to put that into a variable and then just add that variable in the JSX, so the main render function is much easier to follow. – zeckdude Dec 09 '19 at 06:14
1

In that case, you can add `global` to the style tag: https://codesandbox.io/s/styled-jsx-example-p33tr – Matt Carlotta Dec 09 '19 at 06:15
Interesting. Will that rule apply to all child components that this component calls though? Or is it scoped to this file only? – zeckdude Dec 09 '19 at 06:16
1

Not super familar with `styled-jsx` (I use `styled-components`), that said, it appears to globally apply to the className `button`: https://codesandbox.io/s/styled-jsx-example-p33tr (updated example). – Matt Carlotta Dec 09 '19 at 06:19
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/203875/discussion-between-zeckdude-and-matt-carlotta). – zeckdude Dec 09 '19 at 06:20

score 0 · Answer 2 · answered Dec 09 '19 at 05:40

I think the following should do what you're after:

import React from 'react'

function Button(props) {
  return (
    <a 
      {...props} 
      style={{
        backgroundColor: 'blue',
        color: 'white',
        padding: '20px',
        margin: '10px'
      }}
    >
      {props.children}
    </a>
  );
}

function StyledJsxTest({ isLoggedIn, areButtonsVisible }) {
  return (
    <div>
      <h1>This is a headline</h1>
      <div>
        <Button className="button" href="/dashboard">Test</Button>
        {isLoggedIn ? 
          <Button className="button" href="/dashboard">Dashboard</Button>
          : 
          <Button className="button" href="/signIn">Log In</Button>
        }
      </div>
    </div>
  )
}

export default StyledJsxTest

Thanks for the response, but I am specifically wanting to use the styled-jsx package. https://github.com/zeit/styled-jsx — zeckdude, Dec 09 '19 at 05:46

score 0 · Answer 3 · answered Dec 09 '19 at 08:53

0

Actually, I think there is no problem running the code and getting the style of .button class.
However, I might write it somehow different; but, it works !
The problem maybe of your browser cache
or something !

answered Dec 09 '19 at 08:53

Simin Maleki

1,311
1
8
11

Using styled-jsx, how can I use styles on JSX stored in a variable?

3 Answers3