Selecting children by class name

[garronej]

Selecting children by class name

[jsakas]

Any though?

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

[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]

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]

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...

[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