cssinjs/jss

Error with multiple same component child

Open

#1492 opened on Apr 10, 2021

View on GitHub
 (6 comments) (1 reaction) (0 assignees)JavaScript (7,000 stars) (434 forks)batch import
bughelp wanted

Description

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

Contributor guide