Динамически добавлять стили в styled-jsx в Next.js

Question

Пожалуйста, смотрите код.Я хочу добавить некоторый дополнительный стиль для ссылки about по условию, поэтому я добавляю его в $ {} строки шаблона для тега.Это не относится к новым стилям.

Я попытался объединить строки шаблона.Это тоже не сработало.

Я не могу установить style = {style} в теге, потому что тогда я не смогу использовать стиль: hover.

import Link from 'next/link'
import { withRouter } from 'next/router'

const Header = ({ children, router, href }) => {
  const isIndex = router.pathname === "/";
  const isAbout = router.pathname === "/about";
  return (
    <div>
        <Link href="/">
          <a id="home">Timers</a>
        </Link>
        <Link href="/about">
          <a id="about">About</a>
        </Link>
        <style jsx>{
          `
            a {
              font-family: 'Montserrat Subrayada', sans-serif;
              color: #ffffff;
              text-decoration: none;
              font-size: 24px;
              padding: 2px;
              margin-right: 30px;
            }
            a:hover {
              color: #000000;
              background-color: #ffffff;
              border-radius: 2px;
            }
            ${isAbout ? `
            #about {
              background-color: red;
              color: #000000;
            }
            #about:hover {
              background-color: blue;
              color: #ffffff;
            }
            ` : ``}

          `
        }</style>
    </div>
)}

export default withRouter(Header)

Как можноЛи применять условные стили?

Answer 1

Решение состоит в том, чтобы только динамически изменять значения свойств, а не добавлять целые новые селекторы в одном условии, вы должны сделать это для каждого свойства, например:

<style jsx>{
  `
    a {
      font-family: 'Montserrat Subrayada', sans-serif;
      color: #ffffff;
      text-decoration: none;
      font-size: 24px;
      padding: 2px;
      margin-right: 30px;
      border-radius: 2px;
    }
    a:hover {
      color: #000000;
      background-color: #ffffff;
    }
    #home {
      background-color: ${isHome ? "#ffffff" : ""};
      color: ${isHome ? "#000000" : ""};
    }
    #about {
      background-color: ${isAbout ? "#ffffff" : ""};
      color: ${isAbout ? "#000000" : ""};
    }
  `
}</style>

(я выяснил ответна мой вопрос, в то время как я задавал его, поэтому я подумал, что в любом случае просто опубликую его с ответом на тот случай, если кому-то еще это понадобится)