如何使用带有样式化jsx的Nextjs设置子组件的样式

Question

我正在将Nextjs与styled-jsx一起使用。

我在使用道具样式时遇到问题。

https://github.com/zeit/styled-jsx#constants

我检查了文档如何使用道具样式，这是下面的代码：

const App = () => {
  return (
     ...
    <Title color={"red"}>
        <div>
            <h1>TITLE</h1>
            <p>DESCRIPTION</p>
        </div>
    </Title>
   ...
  )
}
const Title = ({children, color}) => (
    <div className={'test'}>
        {children}
        <style jsx>{`
            .test h1 { color:${color}; }
            .test p { color:${color}; }
        `}</style>
    </div>
);

我不知道为什么这段代码不起作用。

但是下面的代码运行良好。

const App = () => {
  return (
     ...
    <Title color={"red"}>
        <h1>TITLE</h1>
    </Title>
   ...
  )
}
const Title = ({children, color}) => (
    <h1 className={'test'}>
        {children}
        <style jsx>{`
            .test { color:${color}; }
        `}</style>
    </h1>
);

我想知道，为什么它不起作用。我该如何解决？