CODEWITHSUNDEEP
next.jsstyled-jsx
JPM
JPM

Reputation: 383

dynamic styles in styled-jsx not behaving as expected

The variables I set (bgColor,txtColor) don't consistently make it into the styled-jsx. I've attached a screen shot where you can see the console.log isn't showing the same values that are being rendered.

I believe there is something about styled-jsx that I'm not getting. Not sure why this isn't working.

const Badge = (props) => {
  const { variation = null, size = null } = props;

  let bgColor = "#eeeeee";
  let txtColor = "#000000";
  switch (variation) {
    case "red":
      bgColor = "#FADBD8";
      txtColor = "red";
      break;
    case "green":
      bgColor = "#D5F5E3";
      txtColor = "green";
      break;
  }
  /* Test to see what our values are */
  console.log(`props.children=${props.children}, bgColor=${bgColor}, txtColor=${txtColor}`)
  return (
    <span className="badge">
      {props.children}

      {/* My colors and text in the CSS do not match the vars printed to cosole above */}
      <style jsx>{`
        .badge {
          text-transform: capitalize;
          display: inline-block;
          padding: 0.2rem 0.4rem;
          border-radius: 3px;
          background-color: ${bgColor};
          color: ${txtColor};  
        }

      `}</style>
    </span>
  );
};

Here is an example of a goofed up rendering of the component... enter image description here

Update Have dug deeper. It looks like sometimes it is assigning the same generated JSX style to items that should be different colors. Any thoughts on why it would assign it the same class? (img attached) enter image description here

Upvotes: 0

Views: 827

Answers (1)

bcjohn
bcjohn

Reputation: 2523

I guess it is out of sync between render styles in server and client. You can apply useState to solve the problem.

const [bgColor, setBgColor] = useState('#eeeeee')

switch(variation) {
  case 'red':
    setBgColor('#FADBD8')
    break
  case 'green'
    setBgColor('#D5F5E3')
    break
}

Upvotes: 0

Related Questions