Как стилизовать дочерний компонент, используя Nextjs с styled-jsx - PullRequest
Новая
       45

Как стилизовать дочерний компонент, используя Nextjs с styled-jsx

0 голосов
/ 07 ноября 2019

Я использую 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>
);

Интересно, почему это не работает. Как я могу решить это?

...