Стили Dynami c в styled-jsx не работают должным образом - PullRequest
Новая
       31

Стили Dynami c в styled-jsx не работают должным образом

0 голосов
/ 13 марта 2020

Переменные, которые я установил (bgColor, txtColor), не всегда попадают в styled-jsx. Я приложил снимок экрана, на котором вы видите, что console.log не показывает те же значения, которые отображаются.

Я полагаю, что в styleled-jsx есть что-то, чего я не получаю. Не уверен, почему это не работает. 

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>
  );
};

Вот пример глупого рендеринга компонента ... enter image description here

Обновление Копали глубже. Похоже, иногда он назначает один и тот же сгенерированный стиль JSX элементам, которые должны быть разных цветов. Любые мысли о том, почему он назначил бы ему тот же класс? (img прилагается) enter image description here

1 Ответ

0 голосов
/ 14 марта 2020

Я полагаю, что это не совпадает c между стилями рендеринга на сервере и клиенте. Вы можете применить useState для решения проблемы. 

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

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