So, I have this dropdown component from AntD (React UI Library), and I want to style this component using Styled Components (library) but the way the component is structured is that the menu items of this dropdown are not inside the root div, but in the same level as the root div, and they are rendered in the screen using position (whenever you hover over the component or click in it).
So, when I "target" the component and start styling, I cannot access these menu items, just the component itself, because of this hierarchy.
Here's a few examples:
Button component inside root div
First menu item outside the root div
So, whenever I get the styled component inside the styles file:
import styled from 'styled-components';
import AntDropdown from 'antd/lib/dropdown';
export const DropdownButton = styled(AntDropdown.Button)`*CSS*`;
I cannot add CSS to these menu items because of the way it's structured... Is there any way to style these menu items without a global CSS file (not a option)?