Tailwind styles aren't applied to Popover Menus when following Tailwind MUI interoperability docs
See original GitHub issueDuplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
When using MUI style interoperability with tailwind and CRA/Next, we need to specify the important
option in the tailwind config in order to correctly apply styles between the two frameworks.
All components of the React tree should fall under the container they are spawned in #root
/#__next
.
The Popover Menu
elements uses Portals under the hood and doesn’t respect the React container and instead makes the container a child of the body
element.
The means that no tailwind styles can be applied to any Menu children and anything contained within that popover element.
Example Component
const UserDropdown: React.FC = () => {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const open = Boolean(anchorEl);
const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<Stack>
<div
className="cursor-pointer"
id="basic-button"
aria-controls="basic-menu"
aria-haspopup="true"
aria-expanded={open ? "true" : undefined}
onClick={handleClick}
>
<Avatar alt="Alt" src="source" />
</div>
<Menu
id="basic-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
MenuListProps={{
"aria-labelledby": "basic-button",
}}
elevation={0}
>
<Stack className="w-12">
{/* No classes from tailwind work anywhere in this component */}
<MenuItem className="bg-black" onClick={() => {}}>My account</MenuItem>
</Stack>
</Menu>
</Stack>
);
};
Generates the following DOM tree
And as we can see, the Menu component falls outside the #__next
react container
Expected behavior 🤔
The popover menu should be able to have styles applied to it correctly from other CSS frameworks like the rest of the components.
This may mean that it should be generated within the React container that spawned it
Steps to reproduce 🕹
Steps:
- Integrate Tailwind with a MUI project by following the docs listed below
- Add a Menu component trigger by a Popover
- Add tailwind styles and notice they are not applied
Context 🔦
When following the docs at MUI Tailwind Inoperability it says to specify #__next
/#root
as the select to apply important to.
However the Menu component gets generated as a child of the body
element which falls outside of the React container. This breaks the css important
selector and means tailwind cannot be applied to Menu children
Your environment 🌎
`npx @mui/envinfo`
Tested On Chrome
System:
OS: macOS 12.3.1
CPU: (10) arm64 Apple M1 Pro
Memory: 248.31 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
Yarn: 1.22.18 - ~/.nvm/versions/node/v16.15.0/bin/yarn
npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
Managers:
Homebrew: 3.4.11 - /opt/homebrew/bin/brew
pip3: 21.2.4 - ~/.pyenv/shims/pip3
RubyGems: 3.2.22 - /usr/local/opt/ruby/bin/gem
Utilities:
Make: 3.81 - /usr/bin/make
GCC: 13.1.6 - /usr/bin/gcc
Git: 2.36.1 - /opt/homebrew/bin/git
Clang: 13.1.6 - /usr/bin/clang
FFmpeg: 4.4.1 - /usr/local/bin/ffmpeg
Servers:
Apache: 2.4.51 - /usr/sbin/apachectl
Virtualization:
Docker: 20.10.16 - /opt/homebrew/bin/docker
IDEs:
Nano: 6.3 - /opt/homebrew/bin/nano
VSCode: 1.67.2 - /usr/local/bin/code
Vim: 8.2 - /usr/bin/vim
Xcode: /undefined - /usr/bin/xcodebuild
Languages:
Bash: 3.2.57 - /bin/bash
Go: 1.18 - /usr/local/bin/go
Java: 13.0.2 - /usr/bin/javac
Perl: 5.30.3 - /usr/bin/perl
Python: 3.9.6 - /Users/ajhenry/.pyenv/shims/python
Python3: 3.9.6 - /Users/ajhenry/.pyenv/shims/python3
Ruby: 3.0.2 - /usr/local/opt/ruby/bin/ruby
Databases:
SQLite: 3.37.0 - /usr/bin/sqlite3
Browsers:
Chrome: 102.0.5005.61
Safari: 15.4
Issue Analytics
- State:
- Created a year ago
- Comments:9 (7 by maintainers)
Top GitHub Comments
I think I can tackle this!
Maybe @robertwt7 can help out here.