I have just upgraded from material-beta to the new material-ui-text rc1. It compiles and works fine expect the components is initialized with the css property visibility set to hidden via different css classes that is applied to the components. I tried both dialog component (as in the example below) and the popover component. Same result. Both are hidden at start up.
The dialog component have this class applied .MuiModal-hidden-224. Seems wrong to me that the component is initialzed as hidden. This is the HTML of the root of the modal:
<div class="MuiModal-root-223 MuiDialog-root-216 MuiModal-hidden-224" role="dialog">
This is the react code i'm using.
import * as React from "react";
import "./SharingDialog.less";
import Dialog from "@material-ui/core/Dialog";
import Button from "@material-ui/core/Button";
interface IProps {
locked: boolean
}
interface IState {
open: boolean;
anchorEl: any;
}
export default class SharingDialog extends React.Component<IProps, IState> {
constructor(props: IProps) {
super(props);
this.state = {
open: false,
anchorEl: null
}
}
handleOpen = (event:any) => {
this.setState({open: true, anchorEl: event.currentTarget});
}
handleClose() {
this.setState({open: false})
}
render() {
const { locked } = this.props;
return (
<div className="sharing-dialog">
<Button>Test</Button>
<button disabled={!locked} className="btn btn-primary" onClick={(event) => this.handleOpen(event)}>Open modal</button>
<Dialog
open={this.state.open}>
<div className="sharing-dialog-component">
Testing
</div>
</Dialog>
</div>
)
}
}
What am i doing wrong? Why does the modal start up as hidden?
xs, extra-small: 0px. sm, small: 600px. md, medium: 900px. lg, large: 1200px.
Material UI offers React components for faster and easier web development. You can create your own design system, or start with Material Design. You can find much useful information on their websites and the components you would like to use in your project.
Unfortunately, you can't install the separate components from the Material UI. The only way is to install the @material-ui/core directly.
Material UI Hidden component is used to change the visibility of any other component. We can use this component to hide a component even on different breakpoints. For example, if you have one sidebar that you want to hide on small screen devices, you can use this component with breakpoints.
I had the same issue. It appears updating to React 16.3.2 will fix the problem.
https://github.com/mui-org/material-ui/issues/11414
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With