Skip to content

When using react-jss ThemeProvider, props ignored #1589

Open
@SevenZark

Description

@SevenZark

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions