Selecting children by class name

[jsakas]

Hello, I am trying to figure out how to select nested children by class name using this library. Below is an example of how we did it with JSS:

  el1: {
    '&:hover $el2': {
      display: 'block',
    },
  },
  el2: {
    display: 'none'
  },

Is this currently supported? The docs say:

tss-react unlike jss-react doesn't support the $ syntax, but you'll see. It isn't needed.

But don't clarify how we would do the above.

[garronej]

Hi @jsakas,
Sorry, it's an oversight of my part.
I wasn't encline to implement this API because it's hard to make it type safe.
Now I understand that it's a must have.
I will implement a feature to cover this use case, I can't tell you exactly when though.

[garronej]

I think I can come up with an API like that:

const useStyles = makeStyles<{ color: "red" | "blue" }>()(
    (theme, { color }, classes) => ({
          "el1": {
              [`&:hover .${classes.el2}`]: {
                  "display": "block"
              },
          },
          "el2": {
               "display": "none"
          },
    })
);

Any though?

[jsakas]

Any though?

Yes, I think that would be a great alternative to the jss syntax.

[jsakas]

I will implement a feature to cover this use case, I can't tell you exactly when though.

This seems pretty critical to anyone who is migrating from Material UI v4 to v5 but can't move to styled components syntax yet.

I'm trying to address myself on a fork but it seems like the proposed API might not be possible due to the order of operations in the library.

[garronej]

This seems pretty critical to anyone who is migrating from Material UI v4 to v5 but can't move to styled components syntax yet.

Agreed, this needs to be done ASAP. I will try to free up time in the coming days.

I'm trying to address myself on a fork but it seems like the proposed API might not be possible due to the order of operations in the library.

To implement the proposed API I think we will need a preflight to get [ "el1", "el2" ] or maybe we could make it work with proxies...

[garronej]

I will have a look tonight. Maybe I can get it done in a couple of hours...

[jsakas]

I have started on the work but have been unable to get it to work properly with typescript typings. The classes object keeps coming back as Record<never, string> and I am unsure why. See the PR here: #13

[garronej]

Nice!

[garronej]

const useStyles = makeStyles()((theme, _params, css) => {

	const child = {
		"background": "blue",
		"border": "1px solid black"
	};

	return {
		"parent": {
			"border": "1px solid black",
			"padding": 30,
			[`&:hover .${css(child)}`]: {
				"background": "red",
			}
		},
		child
	};
});
//...

<div className={classes.parent}>
	<div className={classes.child}>
		Background should turn red when mouse is hover the parent.
        </div>
</div>

[garronej]

Hi @jsakas,
I am sorry I had to update the API for nested selector. The approach based on css was broken.
https://github.com/garronej/tss-react#selecting-children-by-class-name