We Keep Coding

Creating Styled component with multiple elements

I am dabbling with Styled components, and was trying to create a "dumb" component which has multiple html tags in it. Something like:
<div className="component-container">
Link text
<p className="para">Some Text</p>
</div>
Is there a way to wrap above html in one single styled component? I read the documentation, and I only see examples of single html element based components like this:
const Container = styled.div`
display: flex;
justify-content: space-between;
.para {
font-size: 15px;
}
`;
I know I can do:
<Container>
Link text
<p className="para">Some Text</p>
</Container>
But that won't be optimal. I would rather create a normal React functional component instead, which can wrap all the markup in one single component which I can import anywhere and use in a single line.

The way you would code something like this is make it a functional component like you are saying.
const YourComponent = () => (
<Container>
Link text
<p className="para">Some Text</p>
</Container>
);
Styled-components only style elements, but the Container styled-component can be re-used of course.

React Bootstrap: triggering a Popover seems to break Dropdown components

I have a parent component that renders both a react-bootstrap Popover and a DropdownButton, like so.
const OverlayTrigger = ReactBootstrap.OverlayTrigger;
const Popover = ReactBootstrap.Popover;
const DropdownButton = ReactBootstrap.DropdownButton;
const Dropdown = ReactBootstrap.Dropdown;
class App extends React.Component {
render() {
return (
<React.Fragment>
<div className="d-flex w-50 justify-content-around">
<OverlayTrigger
trigger="hover"
placement="right"
overlay={
<Popover id="popover-basic">
<Popover.Title as="h3">Popover</Popover.Title>
<Popover.Content>My Popover</Popover.Content>
</Popover>
}
>
<Button>Hover Over Me First</Button>
</OverlayTrigger>
<DropdownButton title="Then, Click Me Second">
<Dropdown.Item href="#/action-1">This</Dropdown.Item>
<Dropdown.Item href="#/action-2">Overlay</Dropdown.Item>
<Dropdown.Item href="#/action-2">Won't</Dropdown.Item>
<Dropdown.Item href="#/action-2">Apper</Dropdown.Item>
<Dropdown.Item href="#/action-3">After</Dropdown.Item>
<Dropdown.Item href="#/action-3">Clicking</Dropdown.Item>
<Dropdown.Item href="#/action-3">Popover</Dropdown.Item>
</DropdownButton>
</div>
</React.Fragment>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
Issue:
Once the popover is triggered via an event, the Dropdown no longer works at all, even after the popover is dismissed. I have used both the Dropdown and DropdownButton components, and the issue persists. I have even tried changing the popover's triggering event to hover, and no luck there either.
Specs:
React-Bootstrap 1.4.0
React and ReactDOM 17.0.1
Twitter Bootstrap 4.5.0
Here is a pen demonstrating the problem if you want to fiddle with it https://codepen.io/UntidyJoseph/pen/abZaZqe
Any ideas on what I'm doing wrong?
EDIT:
I should also mention that both of these components come straight from the React-Bootstrap documentation, and seem to have every reason to work together.

An update of "react-overlays" to version >= 4.1.1 fixes this problem. I simply added this specific version into my package.json file to avoid sticking to the old 2.x through dependency resolution.

Z-Index on Popper menu?

I have a working example reproducing this issue on codesandbox.io.
What I'm trying to do is do the 'sit below' menu as demonstrated on the Material-UI documentation.
return (
<div className={classes.root}>
<div>
<Button
buttonRef={node => {
this.anchorEl = node;
}}
aria-owns={open ? "menu-list-grow" : null}
aria-haspopup="true"
onClick={this.handleToggle}
>
Toggle Menu Grow
</Button>
<Popper open={open} anchorEl={this.anchorEl} transition disablePortal>
{({ TransitionProps, placement }) => (
<Grow
{...TransitionProps}
id="menu-list-grow"
style={{
transformOrigin:
placement === "bottom" ? "center top" : "center bottom"
}}
>
<Paper>
<ClickAwayListener onClickAway={this.handleClose}>
<MenuList>
<MenuItem onClick={this.handleClose}>Profile</MenuItem>
<MenuItem onClick={this.handleClose}>My account</MenuItem>
<MenuItem onClick={this.handleClose}>Logout</MenuItem>
</MenuList>
</ClickAwayListener>
</Paper>
</Grow>
)}
</Popper>
</div>
<Button color="default" variant="contained">
{" "}
I'm a button that sits under the menu
</Button>
</div>
);
The issue I have here is that the Button further down the DOM, from the menu is always on top.
I've tried manually adding zIndex to various parts of the menu - but to no avail.
I suspect that the issue is something to do with the transition.
Can someone explain what's going on here, and how would I solve it?

I removed the disablePortal prop on the Popper component :
<Popper open={open} anchorEl={this.anchorEl} transition disablePortal>
Which now becomes
<Popper open={open} anchorEl={this.anchorEl} transition>
See the Material-UI documentation for the Popper component disablePortal prop to see why:
Disable the portal behavior. The children stay within it's parent DOM hierarchy.
By default, the Popper component uses the React Portal API : https://reactjs.org/docs/portals.html
Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component
Using the React Portal API, the Material-UI Popper component renders by default outside the DOM hierarchy of the parent tree, this explains why it resolves the overlaying issue.
The modified working code is on codesandbox.io

If anyone still looking to change z-index or if you want to keep disablePortal try the methods below.
Method 1
Give an id to Popper
<Popper id='popper-1' .... />
Now in your CSS file
#popper-1 {
z-index: 5; // or anything higher
}
Method 2
Set z-index in Popper itself using style prop
z-index working code (with disablePortal enabled) here

for me following solution worked: adding zIndex to popper.
<Popper style={{zIndex: 10000}} open={open} anchorEl={this.anchorEl} transition disablePortal>
for me removing disablePortal didn't work

As Suggested by #Ricovitch, remove disablePortal attribute from Popper element or set it's value to false
<Popper open={open} anchorEl={this.anchorEl} transition disablePortal={false}>
As shown in the material-ui popper scroll playground example when disablePortal is false, the popup element is attached to body element, which is the default behavior. For example, your HTML structure will look like:
<body>
... existing elements ...
<parent>
<button onClick={openMenu}/>
</parent>
... more elements ...
... attached popup menu for Popper ...
</body>
However, when you set disablePortal to true, it will have following html structure:
<body>
... existing elements ...
<parent>
<button onClick={openMenu}/>
... attached popup menu for Popper ...
</parent>
... more elements ...
</body>
I hope this makes things clearer!

mobile stepper: 1000
speed dial: 1050
app bar: 1100
drawer: 1200
modal: 1300
snackbar: 1400
tooltip: 1500
<Popper style={{ zIndex: 1900 }} open={open1} anchorEl={anchorRef1.current} role={undefined} transition disablePortal>any thing in the popper </Popper>

Modifying Shopify Polaris Styles - Reactjs

I am trying to modify Shopify Polaris Button components colors for React, I tried to change style.css file but nothing happened.
Any idea how to do so?
App.js
import React, { Component } from 'react';
import '#shopify/polaris/styles.css';
import {Page, Card, Button} from '#shopify/polaris';
class App extends Component {
render() {
return (
<div className="App">
<Page title="Example app">
<Card sectioned>
<Button onClick={() => alert('Button clicked!')}>Example button</Button>
</Card>
</Page>
</div>
);
}
}
export default App;
I am trying to modify node_modules/#shopify/polaris/styles.css , but it does not make ay effect to button color.

The Polaris design system is meant to provide consistency to apps within the Shopify ecosystem. It’s not intended as an alternative to something like Bootstrap or Foundation, so changing button colors wasn’t something we built the library to support.

Even thou full colorizing on a button isn't possible. You can partially modify a button like so:
<div style={{color: '#bf0711'}}>
<Button monochrome outline>
Click Me
</Button>
</div>
This won't give you full control to like the background color but it can help to partially stylize the button. It creates an outline and light background when you roll over.

React MDL: No drawer button with standalone drawer

I'm building a web view with my layout using basic React setup and react mdl (https://react-mdl.github.io/react-mdl) components. Of course I do have mdl css on my template.
I want to use the drawer components from React MDL with my custom layout. So far, i have this in my layout:
<div className="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<Header/>
<Drawer title="Title">
<Navigation>
Link
Link
Link
Link
</Navigation>
</Drawer>
</div>
Rendered drawer:
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
Link
Link
Link
Link
</nav>
</div>
Problem is it render ok but there are no drawer button generated. In demo layout a div with class mdl-layout__drawer-button is generated beside the drawer div, and a div with class mdl-layout__obfuscator at the end of layout.

I got the same issue, cause I made a mistake by using material-design-lite's scrips instead of react-mdl's scripts.
import 'react-mdl/extra/material.css'
import 'react-mdl/extra/material.js'
Hope this helps!