[data grid] .MuiDataGrid-columnHeader: first-of-type doesn't work in v7

[WhiteWolf-js]

Steps to reproduce

Link to live example: (required)

Steps:
this is a example:
https://codesandbox.io/p/sandbox/flamboyant-leakey-fh6645?file=%2Fsrc%2FDemo.tsx @michelengelen here is my example

Current behavior

cannot effect &:first-of-type css styles

Expected behavior

because in v7 ,here changes some doms structure, It has greatly affected

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: first-of-type

Search keywords:

[michelengelen]

Please provide a minimal reproduction test case with the latest version. This would help a lot 👷.

A live example would be perfect. You can find a examples and guides on how to find templates in our docs with which you can provide examples for your specific use-case: Support - Bug reproduction.

Thank you! 🙇🏼

[WhiteWolf-js]

https://codesandbox.io/p/sandbox/flamboyant-leakey-fh6645?file=%2Fsrc%2FDemo.tsx @michelengelen here is my example

[WhiteWolf-js]

i noticed that

if i delete this element, it will work

[WhiteWolf-js]

i want to know if this element has some else function?

[michelengelen]

The :first-of-type pseudo selector cannot be used on classes. Thats why it does not work the way you want it to. It merely selects the first DOM of a specific type. In this case it would select the first div element only.

I am not sure if this will be possible due to the DOM structure we have. With the presentation div present which prevents any selection based on classes in combination with :first-* and :last-*.

@romgrk any idea how we could make this happen?

[romgrk]

The element creates the virtual offset spacing. I don't think using :first-of-* selectors is good, even if they worked, the first rendered column changes as the virtualization window is scrolled by the user. Use [aria-colindex=N] (1 indexed) if you want to target a specific column.

[WhiteWolf-js]

but also how i can get the :last-of-type, because i want to set paddingLeft/paddingRight to fit my components @romgrk

[romgrk]

At the moment you would use [aria-colindex="${columns.length}"]. If you want classes for those cases, we can convert this in a feature request or you can submit a PR for it.

[michelengelen]

columns.length might lead to buggy behavior if you are using column visibility.
You can instead use the apiRef.getVisibleColumns method instead and update a state when the visibilityModel changes:

onColumnVisibilityModelChange={(newVisibilityModel) => {
  console.log(apiRef.current?.getVisibleColumns());
}}

Or you can rely on the newVisibilityModel model param to calculate the amount of visible columns that way, but with the apiRef this is a bit easier.

Ojections @romgrk ?

[romgrk]

That or gridVisibleColumnFieldsSelector.

[romgrk]

Needed the selector for another bug, I've added .MuiDataGrid-columnHeader--last in an upcoming PR.

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@WhiteWolf-js: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.