How to use pseudo class :not(:first-child) by @fluentui/react-make-styles?

[yifanwww]

Environment Information

• Package version(s): @fluentui/react at v8.18.0
• Browser and OS versions: windows 10 20H2 19042.985

Please provide a reproduction of the bug in a codepen:

Actual behavior:

I use makeStyles to create a style:

const useClasses = makeStyles({
    list: {
        display: "flex",
        flexDirection: "column",
        padding: "16px 0px",

        ":not(:first-child)": { marginTop: "16px" }
    },
});

And apply the class name list to a div, but :not(:first-child) does not apply to the children of the div.

codepen: https://codepen.io/yf1999/pen/ZEeqvPr

Expected behavior:

The pseudo class :not(:first-child) should be applied to the children of the div.

Priorities and help requested:

Are you willing to submit a PR to fix? No, I don't know how makeStyles works.

Requested priority: Maybe normal?

[miroslavstastny]

:not(:first-child) selector is equivalent of &:not(:first-child) and applies to the list selector in the example. If the generated classname for the list slot is list-1234, the selector is .list-1234:not(:first-child).

But you want it to be applied to list's children - in that case you need to use & :not(:first-child) (with & and SPACE) in the selector to identify children:

const useClasses = makeStyles({
    list: {
        display: "flex",
        flexDirection: "column",
        padding: "16px 0px",

        "& :not(:first-child)": { marginTop: "16px" }
    }
});

Another option would be to use the selector you propose but on the item slot:

const useClasses = makeStyles({
    list: {
        display: "flex",
        flexDirection: "column",
        padding: "16px 0px",
    },
    item: {
        background: "yellow",
        height: "10px",
        ":not(:first-child)": { marginTop: "16px" }
      }
});

[yifanwww]

Thank you for your help!