I have an issue related with styling in React / Material UI. I think is an issue related with TouchRipple from Material-UI
<div key={indexP}>
<Link className={classes.link} to={parent.link}>
<ListItem button selected={this.state.treeParentOpen[indexP] === true} onClick={this.handleClick(indexP)}>
<ListItemIcon>
<ParentIcon />
</ListItemIcon>
<ListItemText primary={parent.title} />
</ListItem>
</Link>
<Divider />
</div>
I have the above code inside a Drawer component (this is a small extract just to exemplify), for a Sidebar menu.
The issue i am having is related with the styling interaction of the ListItem and Link Components.
If i take the Link out of the code i have a normal ListItemripple behaviour (onclick and offclick), everything is pretty and in grey shades.
When i had the Link to the code (as is), the ripple behaviour of the ListItem changes and onClick is Blue and offClick purple. How should i address the styling of the ripple effect associated with buttonBase used in ListItem.
Thanks!
Related
I have created a React app and just put the component as they said in the link https://mui.com/material-ui/getting-started/templates/.
From this link, I got a beautiful redeemed UI of Dashboard. Now I want to add my custom menu in the sidebar but I'm not getting that, how could I manage it.
Question is: When I click from side menu, How could I either load my content in middle area of page? or How could I negigate user to that page?
<ListItemButton>
<ListItemIcon>
<FilterListIcon />
</ListItemIcon>
<ListItemText primary="Category" />
</ListItemButton>
I followed this tutorial (Full code on github) and implemented the material drawer. Now I can't close the drawer or open it with something like a function. How can I do it?
also the drawer is not swapping.
How I can access to Drawer object inside my webpage (DOM)? And change it's state such open = false.
Sorry for my questions I'm very new to react.
<Drawer
variant="temporary"
anchor="right"
open={true}
>
<List>
<ListItem>
first text
</ListItem>
<ListItem>
b
</ListItem>
</List>
</Drawer>
I want to have a menu icon on top right of my page and when the user clicks on it a modal navigation drawer will display.
there are many examples here in material-ui docs of how to use Drawers. check this out
I'm trying to create a left sidebar only for desktop (min width 1200px), in other case (tablet, mobile), needs to hide the sidebar. I'm using Sidebar Pushable from Semantic UI React.
I tried this demo to this but doesn't works:
<Sidebar.Pushable as={Segment}>
<Sidebar
as={Menu}
animation='push'
icon='labeled'
inverted
vertical
visible={window.innerWidth >= 1200 ? true : false}
width='thin'
>
<Menu.Item as='a'>
<Icon name='home' />
Home
</Menu.Item>
<Menu.Item as='a'>
<Sidebar.Pusher>
<Segment basic>
//CONTENT
</Segment>
</Sidebar.Pusher>
</Sidebar.Pushable>
Someone else had the same problem? Many Thanks!
Armando
the issue is not with render load times. The issue is that react does not re-render a component unless the state of that component changes. Since you had tied the visible prop with window.innerWidth directly, for that component the state was not changing and hence was not re-rendering. Checkthis link with working code sandbox
https://codesandbox.io/s/semantic-ui-example-xqhjl?file=/example.js
When clicking an icon in a material-ui menu, event.target does not provide values to determine which icon was clicked
Here is my code:
<ListItem button id="Dashboard" onClick={handleMenuListClick}>
<ListItemIcon>
<DashboardIcon />
</ListItemIcon>
<ListItemText primary="Dashboard" />
</ListItem>
When clicking on the button text area (ie. "Dashboard"), I am able to read the event.target values to determine which menu listitem was clicked. When clicking on the DashboardIcon, the handler is triggered but the event.target yields the svg (ex. svg class="MuiSvgIcon-root"...
Is there a better way to determine which icon was clicked?
Like I was saying in the comments, I would make an inline lambda or bound function here to do this. Be explicit with your code and pass values that you expect. It'll be less error prone in the long run :) You should define a constant / enum to map to as well.
const Pages = {
dashboard: 'Dashboard',
profile: 'Profile'
}
and then render it
<ListItem
button
id={Pages.dashboard}
onClick={() => handleMenuListClick(Pages.dashboard)}
>
<ListItemIcon>
<DashboardIcon />
</ListItemIcon>
<ListItemText primary="Dashboard" />
</ListItem>
In Typescript you can define enums 😍
enum Pages {
dashboard = 'dashboard',
profile = 'profile'
}
I like the look of the Material UI Styled Component api (not the styled-component library), but I'm having trouble turning my simple button component into a linked button.
How do I insert a react-router-dom link into a MUI Styled Component button?
Previously, the typical Material UI HOC api approach let me add a linked "reports" button as follows. It works great, but requires a lot more boilerplate (not shown here):
<Button
variant="contained"
color="primary"
className={classes.button}
component={Link}
to="/reports"
>
<ShowChartIcon className={classes.buttonIcon} />
Reports
</Button>
#1 Obvious Approach: When I follow this pattern and include the component and to properties my own MUI Styled Component called <MyButton>, I get a typescript error saying those properties don't exist.
#2 Different Approach: Following the pattern proposed in this material ui github issue, the button does indeed link to the reports screen, but the mui variant and color are lost:
<MyButton
variant="contained"
color="primary"
{...{
component: Link,
to: `/reports`
} as any}
>
<MyShowChartIcon />
Reports
</MyButton>
#3 Workaround Approach: A less desirable option is to wrap the button in a <Link>. That does create a working link, but it also brings in a little bit of unintended styling.
<Link to="/reports">
<MyButton
variant="contained"
color="primary"
>
<MyShowChartIcon />
Reports
</MyButton>
</Link>
Using the latest version of material-ui (v4.0.2) you can use the HOC component created with withStyles, but you will have to manually cast the custom component back to its original type:
const MyButton = withStyles(
createStyles({
root: {
color: 'red'
}
})
)(Button) as typeof Button
then you can use your custom component like you would the original one:
<MyButton component={Link} to="/blank-page">
my button
</MyButton>
Here is a working example: https://codesandbox.io/s/createreactappwithtypescript-n6wih
I found this solution from this comment: https://github.com/mui-org/material-ui/issues/15695#issuecomment-498242520.