Skip to content

Commit 989b456

Browse files
mnajdovamnajdova
authored
[docs] Add interoperability section for Portal (mui#25575)
1 parent bcb6184 commit 989b456

File tree

3 files changed

+43
-99
lines changed

3 files changed

+43
-99
lines changed

‎docs/src/pages/guides/interoperability/StyledComponentsPortal.js

Lines changed: 10 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,22 @@
11
import * as React from 'react';
2-
import styled from 'styled-components';
2+
import { experimentalStyled as styled } from '@material-ui/core/styles';
33
import Button from '@material-ui/core/Button';
4-
import Menu from '@material-ui/core/Menu';
5-
import MenuItem from '@material-ui/core/MenuItem';
4+
import Tooltip from '@material-ui/core/Tooltip';
65

7-
const StyledMenu = styled(({ className, ...props }) => (
8-
<Menu {...props} classes={{ paper: className }} />
6+
const StyledTooltip = styled(({ className, ...props }) => (
7+
<Tooltip {...props} classes={{ popper: className }} />
98
))`
10-
box-shadow: none;
11-
border: 1px solid #d3d4d5;
12-
13-
li {
14-
padding-top: 8px;
15-
padding-bottom: 8px;
9+
& .MuiTooltip-tooltip {
10+
background: navy;
1611
}
1712
`;
1813

1914
export default function StyledComponentsPortal() {
20-
const [anchorEl, setAnchorEl] = React.useState(null);
21-
22-
const handleClick = (event) => {
23-
setAnchorEl(event.currentTarget);
24-
};
25-
26-
const handleClose = () => {
27-
setAnchorEl(null);
28-
};
29-
3015
return (
31-
<div>
32-
<Button
33-
aria-owns={anchorEl ? 'simple-menu' : undefined}
34-
aria-haspopup="true"
35-
variant="contained"
36-
onClick={handleClick}
37-
>
38-
Open Menu
16+
<StyledTooltip title="I am navy">
17+
<Button variant="contained" color="primary">
18+
Styled tooltip
3919
</Button>
40-
<StyledMenu
41-
id="simple-menu"
42-
anchorEl={anchorEl}
43-
open={Boolean(anchorEl)}
44-
onClose={handleClose}
45-
getContentAnchorEl={null}
46-
anchorOrigin={{
47-
vertical: 'bottom',
48-
horizontal: 'center',
49-
}}
50-
transformOrigin={{
51-
vertical: 'top',
52-
horizontal: 'center',
53-
}}
54-
>
55-
<MenuItem onClick={handleClose}>Profile</MenuItem>
56-
<MenuItem onClick={handleClose}>My account</MenuItem>
57-
<MenuItem onClick={handleClose}>Logout</MenuItem>
58-
</StyledMenu>
59-
</div>
20+
</StyledTooltip>
6021
);
6122
}

‎docs/src/pages/guides/interoperability/StyledComponentsPortal.tsx

Lines changed: 10 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,22 @@
11
import * as React from 'react';
2-
import styled from 'styled-components';
2+
import { experimentalStyled as styled } from '@material-ui/core/styles';
33
import Button from '@material-ui/core/Button';
4-
import Menu from '@material-ui/core/Menu';
5-
import MenuItem from '@material-ui/core/MenuItem';
4+
import Tooltip, { TooltipProps } from '@material-ui/core/Tooltip';
65

7-
const StyledMenu = styled(({ className, ...props }) => (
8-
<Menu {...props} classes={{ paper: className }} />
6+
const StyledTooltip = styled(({ className, ...props }: TooltipProps) => (
7+
<Tooltip {...props} classes={{ popper: className }} />
98
))`
10-
box-shadow: none;
11-
border: 1px solid #d3d4d5;
12-
13-
li {
14-
padding-top: 8px;
15-
padding-bottom: 8px;
9+
& .MuiTooltip-tooltip {
10+
background: navy;
1611
}
1712
`;
1813

1914
export default function StyledComponentsPortal() {
20-
const [anchorEl, setAnchorEl] = React.useState<EventTarget | null>(null);
21-
22-
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
23-
setAnchorEl(event.currentTarget);
24-
};
25-
26-
const handleClose = () => {
27-
setAnchorEl(null);
28-
};
29-
3015
return (
31-
<div>
32-
<Button
33-
aria-owns={anchorEl ? 'simple-menu' : undefined}
34-
aria-haspopup="true"
35-
variant="contained"
36-
onClick={handleClick}
37-
>
38-
Open Menu
16+
<StyledTooltip title="I am navy">
17+
<Button variant="contained" color="primary">
18+
Styled tooltip
3919
</Button>
40-
<StyledMenu
41-
id="simple-menu"
42-
anchorEl={anchorEl}
43-
open={Boolean(anchorEl)}
44-
onClose={handleClose}
45-
getContentAnchorEl={null}
46-
anchorOrigin={{
47-
vertical: 'bottom',
48-
horizontal: 'center',
49-
}}
50-
transformOrigin={{
51-
vertical: 'top',
52-
horizontal: 'center',
53-
}}
54-
>
55-
<MenuItem onClick={handleClose}>Profile</MenuItem>
56-
<MenuItem onClick={handleClose}>My account</MenuItem>
57-
<MenuItem onClick={handleClose}>Logout</MenuItem>
58-
</StyledMenu>
59-
</div>
20+
</StyledTooltip>
6021
);
6122
}

‎docs/src/pages/guides/interoperability/interoperability.md

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -386,7 +386,29 @@ const CustomizedSlider = styled(Slider)(
386386

387387
### Portals
388388

389-
TODO: fill this section after the portal is implemented with the new styled engine.
389+
The [Portal](/components/portal/) provides a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
390+
Because of the way styled-components scopes its CSS, you may run into issues where styling is not applied.
391+
392+
For example, if you attempt to style the `tooltip` generated by the [Tooltip](/components/tooltip/) component,
393+
you will need to pass along the `className` property to the element being rendered outside of it's DOM hierarchy.
394+
The following example shows a workaround:
395+
396+
```jsx
397+
import * as React from 'react';
398+
import { experimentalStyled as styled } from '@material-ui/core/styles';
399+
import Button from '@material-ui/core/Button';
400+
import Tooltip from '@material-ui/core/Tooltip';
401+
402+
const StyledTooltip = styled(({ className, ...props }) => (
403+
<Tooltip {...props} classes={{ popper: className }} />
404+
))`
405+
& .MuiTooltip-tooltip {
406+
background: navy;
407+
}
408+
`;
409+
```
410+
411+
{{"demo": "pages/guides/interoperability/StyledComponentsPortal.js"}}
390412

391413
## CSS Modules
392414

0 commit comments

Comments
 (0)