You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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>
The text was updated successfully, but these errors were encountered:
SevenZark
changed the title
When using react-jss ThemeProvider, props are undefined
When using react-jss ThemeProvider, props keys missing
Dec 1, 2021
SevenZark
changed the title
When using react-jss ThemeProvider, props keys missing
When using react-jss ThemeProvider, props ignored
Dec 1, 2021
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?
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:
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:
The text was updated successfully, but these errors were encountered: