Using dynamic styles in React JSS with Typescript

[milotoor]

Expected behavior:
A dynamic style that uses React props should be able to get the type of the props for use in the style rule.

Describe the bug:
Consider the following basic component:

type CardProps = {
  padding: number
};

const Card: React.FC<CardProps> = ({ padding }) => {
  return (
    <div style={{ padding }}>
      I am a card.
    </div>
  );
};

Using JSS this can be refactored:

type CardProps = {
  padding: number
};

const useStyles = createUseStyles({
  card: props => ({
    padding: props.padding
  })
});

const Card: React.FC<CardProps> = () => {
  const classes = useStyles();
  return (
    <div  className={classes.card}>
      I am a card.
    </div>
  );
};

However, in strict mode Typescript will complain that Parameter 'props' implicitly has an 'any' type, because it's unable to infer the props argument's type. This can be fixed by explicitly providing the type:

const useStyles = createUseStyles({
  card: (props: CardProps) => ({
    padding: props.padding
  })
});

But this won't scale well if there are other dynamic styles:

const useStyles = createUseStyles({
  card: (props: CardProps) => ({
    padding: props.padding
  }),
  otherStyleRule: (props: CardProps) => ({
    padding: props.padding * 2
  })
});

It would be great if there were a way to inform createUseStyles what the props type will be. For example:

const useStyles = createUseStyles<CardProps>({
  card: props => ({
    padding: props.padding
  }),
  otherStyleRule: props => ({
    padding: props.padding * 2
  })
});

Perhaps there is already a way to do this? The Typescript section of the v10.0.4 docs is empty, so perhaps the resolution to my issue is to fill out that section. I'm happy to write a bit for the docs, though I need to understand how the types function first!

Versions (please complete the following information):

• jss: 10.0.4
• Browser [e.g. chrome, safari]: n/a
• OS [e.g. Windows, macOS]: macOS
  Feel free to add any additional versions which you may think are relevant to the bug.

[maximprokopchuk]

Also it would be great to have CardProps from example above as expected type of useStyles function param (props):
const styles = useStyles(props)
It expects data?: unknown param now and we can provide data (props) with any type or do not provide it at all. So classes generation can be broken if we will not provide data. But typescript will not catch this mistake

[just-Bri]

You can enforce/inform the prop types like this:

const useStyles = createUseStyles ({
  wrapper: (props: { color: colors }) => ({
    backgroundColor: props.color,
  }),
});

colors is an enum I have in another file:

export enum colors {
  primaryBlue = '#2b27e2',
  primaryOrange = '#ff8d69',
  primaryBlack = '#0a0d3d',
  primaryRed = '#ff1654',
}

This approach "works" but it is extremely clunky and verbose.
I have run in to a similar TS issue when trying to use a theme, since the component has no idea what it is in the theme provided:

export const useStyles = createUseStyles({
  blah: {
    color: ({ theme }) => theme.primaryBlue,
  },
});

This gives an error of "Unsafe member access .primaryBlue on an any value" since the theme is not typed, even if I specify that theme is of type Styles(from react-jss types).

[kof]

Released in v10.6.0