Solution for composition?

[garronej]

Solution for composition?

[awdyson]

Sorry, I should have been more clear.

I'm looking to share styling between classes, within the context of a single createUseClassNames call.
In the example above, I want a link's :hover state to look the same as its react router activeClassName state.
With JSS, there exists the extend plugin: https://cssinjs.org/jss-plugin-extend/
The best plan I've come up with for this would be an external function that's called with theme/props.

So, to rework the example above:

const helper = (theme, props) => ({
  // shared style that relies on theme and/or props
});

const { useClassNames } = createUseClassNames<Props>()((theme, props) => ({
  link: {
    // other styles
    '&:hover':  helper(theme, props),
  },
  activeLink: helper(theme, props),
}));

Hopefully this makes sense.
Also, this is definitely more of a nice to have, considering there's a workaround.
I figured it was in-line with your projects goals though.

[garronej]

@awdyson This is actually a very good point, we need to support that.
Very easy to implement but hard to type.
I will try to think of something...

[awdyson]

Haven't been able to work on this project in a while, so I'm catching up on a lot of updates.

Your solution looks great -- and is the sort of thing I couldn't do well in JSS+MUI for a reason I can't remember.
Also, the method and property names look a lot cleaner these days.
Appreciate the great work 😃

[garronej]

Sorry for late reply @awdyson ,
Sure you can it's a very important requirement!

type Props ={
    size: "big" | "small";
};

const { useClassNames } = createUseClassNames<Props & { color: "red" | "blue" }>()(
    (theme, { size, color }) => ({
        link: {
        ...
        '&:hover':  {
          extend: 'activeLink', // JSS solution
        },
      },
      activeLink: {
          // Here you have access to "size" from Props and "color" from internal state 
      },
}));


function MyComponent(props: Props){

    const [ color, setColor ] = useState<"red" | "blue">("red");

    const { classNames } = useClassNames({ ...props, color });


   //...

}

Best regard

[garronej]

I will, soon, implement something like that:

const { classes, getLinkCss } = makeStyles<Props>()(
    (theme, props) => ({
        "link": {
            // other styles
            "&:hover":  {
               //style specific to hover link
           },
        },
        "activeLink": {
           ...getLinkCss(theme, props)["&:hover"],
           //style specific to activeLink
        }
    })
);

//getLinkCss can be exported for reuse outside of the file.
export { getLinkCss };

We'll get correct typing of getLinkCss, getActiveLinkCss using template literal types.

There will be some voodoo involved to prevent infinite recursion behind the seen but it will be transparent to the user.

[garronej]

In the end I figured out that there is no need for a dedicated API.
Composition documentation