Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[ButtonGroup] Mixing anchor and button elements within the ButtonGroup the styling is incorrect #38403

Closed
wants to merge 1 commit into from
Closed

[ButtonGroup] Mixing anchor and button elements within the ButtonGroup the styling is incorrect #38403

wants to merge 1 commit into from

Conversation

2metres
Copy link
Contributor

@2metres 2metres commented Aug 10, 2023

Update selector to use nth-child(1) and nth-last-child(1) apply to all subelements not just onese of the same type

Screen Shot 2023-08-10 at 10 37 08 am

https://codesandbox.io/s/jovial-sid-dcyl3p?file=/Demo.tsx

@2metres
Copy link
Contributor Author

2metres commented Aug 10, 2023 

$ git remote -v
origin	[email protected]:2metres/material-ui.git (fetch)
origin	[email protected]:2metres/material-ui.git (push)
upstream	[email protected]:mui/material-ui.git (fetch)
upstream	[email protected]:mui/material-ui.git (push)

@mui-bot
Copy link

mui-bot commented Aug 10, 2023 •
edited
Loading

Netlify deploy preview

https://deploy-preview-38403--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against efaf120

@2metres 2metres changed the title When mixing anchor and button elements within the ButtonGroup the styling is incorrect [ButtonGroup] Mixing anchor and button elements within the ButtonGroup the styling is incorrect Aug 10, 2023
@zannager zannager added the component: ButtonGroup The React component. label Aug 10, 2023
@zannager zannager requested a review from michaldudak August 10, 2023 07:00
@ZeeshanTamboli ZeeshanTamboli mentioned this pull request Aug 17, 2023
Merged
1 task
ZeeshanTamboli
ZeeshanTamboli reviewed Aug 17, 2023
View reviewed changes
Copy link
Member

@ZeeshanTamboli ZeeshanTamboli left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@2metres Upon inspecting your CodeSandbox, you'll notice a console warning from emotion js. The first-child, last-child CSS selectors are not supported by emotion in order to support SSR. Instead, I created a PR (#38520) to use the React Context API to identify the first and last button elements and apply the appropriate styling.

Thanks for taking a look into the issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ZeeshanTamboli ZeeshanTamboli ZeeshanTamboli left review comments

@michaldudak michaldudak Awaiting requested review from michaldudak

Assignees
No one assigned
Labels
component: ButtonGroup The React component.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@2metres @mui-bot @ZeeshanTamboli @zannager