menu

Material-UI

React components for faster and easier web development. Build your own design system, or start with Material Design.

Channels
Team
Posts
Chat
Members
Info
Show previous messages

September 15, 2019 at 9:25pm
Hey y'all, I was wondering, what's the easiest way to change layout regarding window size?
  • reply
  • like
I am trying to do this in the easiest way <Tabs orientation= {mdDown ? "vertical" : "horizontal"}>
  • reply
  • like

September 16, 2019 at 6:44am
Have you looked at useMediaQuery?
  • reply
  • like
Have you looked at useMediaQuery?
I tried that but without success. Is there an example with ternary operators?
  • reply
  • like
Hi! I have an issue with FormControlLabel, I am using theme and default styles for font-family, font-size ... etc For all components I get them applied. But for FormControlLabel they are overwritten with default styling. I tried to overwrite styles using withStyles but it also gets overwritten with default mui styles.
  • reply
  • like
anyone can help, or point me where to take a look
  • reply
  • like
The strange thing that in another project it's working, and it also work's in the top level.
  • reply
  • like

September 17, 2019 at 10:15pm
Does anyone know the purpose of the <NoSSR> component? I understand what it does (I think), but I can't think of a use case.
  • reply
  • like

September 19, 2019 at 2:29am
I am using the select component -- https://material-ui.com/components/selects/
  • reply
  • like
but the rounded box is not getting displayed for me
  • reply
  • like

September 25, 2019 at 7:56am
Hey ! How can I use GRID with decimal values ?
  • reply
  • like
i want add focused style to ExpansionPanelDetails but i can't why ? thanks
  • reply
  • like

September 27, 2019 at 9:26am
Hi all :) Does anyone know if it is possible to use a TextField as a container of a custom component ? I just want to use the outline and the label, but don't need any input DOM element at all.
  • reply
  • like

September 30, 2019 at 2:34pm
Hey everyone, I've asked a question about unit testing on StackOverflow. https://stackoverflow.com/questions/58139352/material-ui-testing-docs-mount-function-returns-an-empty-reactwrapper Basically I'm following the testing docs but the example code doesn't work in my specific case, and it would be great to have some feedback as to why the ReactWrapper returned by mount is empty. Thanks.
  • reply
  • like

October 6, 2019 at 6:50pm
does someone know why <Hidden> loads very late? Essentially all components load faster and the ones what are hidden appear at the end
  • reply
  • like
basically
<Hidden smUp> <p>appears late</p> </Hidden>
<p>appears instant</p>
on a viewport that shows the <Hidden> container
Edited
  • reply
  • like
basically
<Hidden smUp> <p>appears late</p> </Hidden>
<p>appears instant</p>
on a viewport that shows the <Hidden> container
Maybe, try using down breakpoint instead?
  • reply
  • like
basically
<Hidden smUp> <p>appears late</p> </Hidden>
<p>appears instant</p>
on a viewport that shows the <Hidden> container
Also, try using implementation="css"
  • reply
  • like
basically
<Hidden smUp> <p>appears late</p> </Hidden>
<p>appears instant</p>
on a viewport that shows the <Hidden> container
I think I know why it's rendering after <p> is rendered. Hidden uses withWidth and withWidth uses useLayoutEffect (when not SSR). And useLayoutEffect fires only after the all DOM mutations. So, the viewport width is not calculated until all components are rendered. As far as I understand. Hope it helps 😊
Edited
  • reply
  • like

October 7, 2019 at 9:11am
So there is no way to solve this?
  • reply
  • like
"down" has no impact and implementation="css" wracks the layout as it inserts another <div> wrapper around the child
  • reply
  • like

October 9, 2019 at 4:42am
Hey everyone, I've asked a question about material ui drawer on StackOverflow. https://stackoverflow.com/questions/58293641/how-to-divide-the-material-ui-drawer-into-header-main-and-footer-sections I want to divide drawer into 3 sections(header-main-footer). Thanks.
  • reply
  • like

October 15, 2019 at 2:27am
Hello, I would like to use Drawer ( https://material-ui.com/api/drawer/ ) but It looks like I made some mistake (no rendering and no errors messages at all) : can you help ?
The component :
import React from 'react';
import {
Drawer
} from '@material-ui/core';
// the menues entries
import {ENTRIES} from "../MenuEntries/MenuEntries";
class HomePage extends React.Component {
render() {
return (
<React.Fragment>
<Drawer children={ENTRIES} />
</React.Fragment>
)
}
}
export default HomePage;
The drawer entries :
import React from 'react';
import {
ListItem,
ListItemIcon,
ListItemText
} from '@material-ui/core';
// icons
import PlaylistPlayIcon from '@material-ui/icons/PlaylistPlay';
import ScheduleIcon from '@material-ui/icons/Schedule';
export const ENTRIES = (
<div>
<ListItem button>
<ListItemIcon>
<PlaylistPlayIcon />
</ListItemIcon>
<ListItemText primary="Jeux" />
</ListItem>
<ListItem button>
<ListItemIcon>
<ScheduleIcon />
</ListItemIcon>
<ListItemText primary="Plannifié" />
</ListItem>
</div>
);
Edited
  • reply
  • like