cssinjs / jss

JSS is an authoring tool for CSS which uses JavaScript as a host language.
https://cssinjs.org
MIT License
7.07k stars 399 forks source link

When using react-jss ThemeProvider, props ignored #1589

Open SevenZark opened 2 years ago

SevenZark commented 2 years ago

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 commented 2 years ago

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?