javascript - 使用 styled-jsx，如何在变量中使用 JSX 上存储的样式？

Question

我正在使用一个变量来有条件地显示不同的 JSX，并且它没有使用在其父函数中定义的样式。我怎样才能做到这一点？

您可以在此处查看演示: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

这段代码中的按钮没有得到 . button规则。我怎样才能让它们发挥作用？

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

Answer 1

我的猜测是您忘记将 styled-jsx/babel 添加到 .babelrc configuration .

工作示例: