cssinjs/jss

Error with multiple same component child

Open

Aperta il 10 apr 2021

Vedi su GitHub
 (6 commenti) (1 reazione) (0 assegnatari)JavaScript (7000 star) (434 fork)batch import
bughelp wanted

Descrizione

Expected behavior: It should not display such a warning

Describe the bug: I get the warning: Warning: [JSS] Rule is not linked. Missing sheet option "link: true". when I duplicate in a component the same child component when it has a dynamic value. I am using Next SSR and have already reported the problem but I don't know where the problem is coming from.

https://github.com/vercel/next.js/issues/23872

If it only appears once it does not show the warning

Thanks ;)

Reproduction: Install the example with-react-jss-app

npx create-next-app --example with-react-jss with-react-jss-app Then modify the pages/index.js to

import { createUseStyles } from 'react-jss'
const useStyes = createUseStyles({
  header: {
    color: props => props.color
  }
})

const Bar = () => {
  const classes = useStyes({ color: 'green' });

  return (
    <>
      <h2 className={classes.header}>dasdasda</h2>
    </>
  )
}

function Index() {
  return (
    <div>
      <h1>
        Example on how to use react-jss with Next.js
      </h1>
      <Bar></Bar>
      <Bar></Bar>
    </div>
  )
}

export default Index

Run in dev mode

npm run dev o yarn dev And it will show the warning:

Warning: [JSS] Rule is not linked. Missing sheet option "link: true".

Versions (please complete the following information):

  • jss: 10.6.0
  • Browser [e.g. chrome, safari]: All browsers, Occurs on the SSR server
  • OS [e.g. Windows, macOS]: macOs

Guida contributor