Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

When using react-jss ThemeProvider, props ignored #1589

Open
SevenZark opened this issue Dec 1, 2021 · 1 comment
Open

When using react-jss ThemeProvider, props ignored #1589

SevenZark opened this issue Dec 1, 2021 · 1 comment

Comments

@SevenZark
Copy link

SevenZark commented Dec 1, 2021

There doesn't seem to be any way to combine theme and props in createUseStyles, when using the ThemeProvider. the JSS web site shows this example:

const classes = useStyles({...props, theme})

But, this does not work for me. In my JSS file, the props come back with only the theme keys, not the props keys.

Strangely, the same section of the docs site also shows the usual useStyles(props) as an example of how to use themes. The example does not consume props at all, either. Still, I tried this too, but the same thing happens. The theme object seems to clobber it, and only the theme keys come back.

This is my code:

const useStyles = createUseStyles((props) => {
  console.log({props});  // shows: {props: [all the theme keys, but start and end do not appear for either method]}
  ... // style rules, which do work
});

// Attempted Method 1
const GridItem = ({children, ...props}) => {
  const theme = useTheme();
  const styles= useStyles({theme, ...props});
  ... // render returned. No errors.

// Attempted Method 2
const GridItem = ({children, ...props}) => {
  const styles= useStyles(props);
  ... // render returned. No errors.

// Here is the consumer, in another file
<GridItem start={1} end={4}>One</GridItem>
@SevenZark SevenZark changed the title When using react-jss ThemeProvider, props are undefined When using react-jss ThemeProvider, props keys missing Dec 1, 2021
@SevenZark SevenZark changed the title When using react-jss ThemeProvider, props keys missing When using react-jss ThemeProvider, props ignored Dec 1, 2021
@SevenZark
Copy link
Author

After further experimenting, I have found the only thing that works is to pass props into the class definition directly. If I put it at the root of the createUseStyles argument (like you can with theme), that's when it doesn't work. This means I have to pass props into each individual class value, but that isn't too terribly bad.

I do think perhaps the documentation could make this a bit less vague, though? Maybe explicitly show an example of a style using both theme and props?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant