使用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。

工作示例：

Answer 2

我认为以下应该做的事情

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

Answer 3

实际上，我认为运行代码并获得.button类的样式没有问题。
但是，我可能会写一些不同的东西。但是，它有效！
问题可能出在您的浏览器缓存
之类！