[Popper] Arrow does not display correctly on v5-beta.1 #27301
Assignees
Comments
|
It seems that it broke during migration to emotion. Now referencing the arrow with |
|
@michal-perlakowski I implemented Popper styles in my project using scss modules instead of Emotion and the problem persists. It seems that styling needs to be updated to fix this issue. I'll post a solution, if I find one. |
|
It looks like is not detected and applied to the Popper and Arrow. When I copied styles manually to arrow, it looks correctly. |
|
Taking a look |
|
This diff should fix it: --- a/docs/src/pages/components/popper/ScrollPlayground.js
+++ b/docs/src/pages/components/popper/ScrollPlayground.js
@@ -18,7 +18,7 @@ import FormGroup from '@material-ui/core/FormGroup';
const Popper = styled(MuiPopper)(({ theme }) => ({
zIndex: 1,
- '&[data-popper-placement*="bottom"] $arrow': {
+ '&[data-popper-placement*="bottom"] .MuiPopper-arrow': {
top: 0,
left: 0,
marginTop: '-0.9em',
@@ -29,7 +29,7 @@ const Popper = styled(MuiPopper)(({ theme }) => ({
borderColor: `transparent transparent ${theme.palette.background.paper} transparent`,
},
},
- '&[data-popper-placement*="top"] $arrow': {
+ '&[data-popper-placement*="top"] .MuiPopper-arrow': {
bottom: 0,
left: 0,
marginBottom: '-0.9em',
@@ -40,7 +40,7 @@ const Popper = styled(MuiPopper)(({ theme }) => ({
borderColor: `${theme.palette.background.paper} transparent transparent transparent`,
},
},
- '&[data-popper-placement*="right"] $arrow': {
+ '&[data-popper-placement*="right"] .MuiPopper-arrow': {
left: 0,
marginLeft: '-0.9em',
height: '3em',
@@ -50,7 +50,7 @@ const Popper = styled(MuiPopper)(({ theme }) => ({
borderColor: `transparent ${theme.palette.background.paper} transparent transparent`,
},
},
- '&[data-popper-placement*="left"] $arrow': {
+ '&[data-popper-placement*="left"] .MuiPopper-arrow': {
right: 0,
marginRight: '-0.9em',
height: '3em',
@@ -215,7 +215,7 @@ export default function ScrollPlayground() {
},
]}
>
- {arrow ? <Arrow ref={setArrowRef} /> : null}
+ {arrow ? <Arrow ref={setArrowRef} className="MuiPopper-arrow" /> : null}
<Paper sx={{ maxWidth: 400, overflow: 'auto' }}>
<DialogTitle>{"Use Google's location service?"}</DialogTitle>
<DialogContent>
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Arrow in the Popper example does not display correctly in the v5.0-beta documentation.
Current Behavior😯
There is no arrow displayed and instead there is a black box in its place.
Expected Behavior🤔
Arrow should be displayed correctly when Popper is enabled.
Steps to Reproduce🕹
Reproduction:
https://codesandbox.io/s/recursing-shannon-rotlg?file=/src/Demo.tsx
v5 documentation with an arrow bug:
https://next.material-ui.com/components/popper/#scroll-playground
It looks correctly in the v4 documentation:
https://material-ui.com/components/popper/#scroll-playground
Context🔦
I'm trying to implement a Popper with arrow, but on the newest version it is broken.
Your Environment🌎
Browser: Brave based on Chrome 91
This issue can be reproduced in any environment.
The text was updated successfully, but these errors were encountered: