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 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

October 15, 2019 at 2:20pm
Are questions in this channel moderated
  • reply
  • like
Hi, we are using material-ui internally and documenting our components with storybook docs. Their Props component adds props documentation from the prop type declarations. Some of these have documentation, but none have the declared. We are looking to add them to complete our documentation. Would the maintainers be interested in these being added directly to the material-ui codebase as a (set of) PRs?
  • reply
  • like

October 23, 2019 at 6:22pm
Struggling with ordering of makeStyles and css specificity: how can I get the inner component (red) to override the outer components styles?
  • reply
  • like

November 9, 2019 at 12:38pm

November 14, 2019 at 2:09pm
you want '> div' not & div
  • reply
  • like
oh, nm i looked at that wrong. if you found an answer I'd be curious too. the docs dont go much in depth for the embedded stuff
  • reply
  • like

December 1, 2019 at 9:51pm
using React-Router, and doing ListItem component={NavLink} and makeStyles is there a way to style the list item based on whether it has the active class or not? or would i have to do it above there in some magical place :-/
  • reply
  • like
was able to get it with '&.active': { .. } now just to get to the icon within :)
  • reply
  • like
BOOM. google & stackoverflow for the win color: "currentColor"
  • reply
  • like
For reference, '&[aria-current]' should also work
  • reply
  • like

December 4, 2019 at 3:18pm
should i use a different component instead of Select? as it is really slow for large lists
  • reply
  • like