I am working on a Server-Side-Rendering React Project, built with Next-JS and Material-UI.
and i want to apply To Material Ui button -> the Link with Dynamic routes
how can i do this? i would apply React Router Link,but it is different...
my problem is that it has another properties required such as "as" property.
what worked for me (inspired from this comment in Github):
<Link
href={'/static/[dynamic]'}
as={'/static/' + someJsString}
passHref>
<Button
component="a">
// other component ...
</Button>
</Link>
for version v10+:
<Link
href={`/static/${someJsString}`}
passHref>
<Button
component="a">
// other component ...
</Button>
</Link>
Edit
Starting next.js v10+ you don't need to specify as with Automatic `href` Resolution so the above code can be written as:
<Link
href={'/static/' + someJsString}
passHref>
<Button
component="a">
// other component ...
</Button>
</Link>
Related
I'm using a standard Material UI button that looks fine if I refresh the page that I am on. However, if I get to the page through a link from another page (I'm using react-router-dom) then the styling from the button is missing.
import {Link} from "react-router-dom";
<Link
color="inherit"
style={{textDecoration: 'none'}}
to={link}>
<Button variant="contained" color="primary">
test
</Button>
</Link>
Hey guys I'm a newbie trying to make a material UI temporary drawer and by default the value of the onClick event is a string and I have no idea how to convert it into an icon.
return (
<div>
{['Home'].map((anchor) => (
<React.Fragment key={anchor}>
<Button onClick={toggleDrawer(anchor, true)}>{anchor}</Button>
<SwipeableDrawer
anchor={anchor}
open={state[anchor]}
onClose={toggleDrawer(anchor, false)}
onOpen={toggleDrawer(anchor, true)}
>
{list(anchor)}
</SwipeableDrawer>
</React.Fragment>
))}
</div>
);
As you can see: "HOME" is a string and what shows up on the site UI is just the "HOME" word that is a button. How do I format the code so the "HOME" button would not display a string but an icon instead. I'd be using MenuIcon from Material UI Icons to take its place. Thanks!!
You can use Icon component and pass the string to the children props. Before that, remember to add the material icon font to your html file
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
import IconButton from "#material-ui/core/IconButton";
import Icon from "#material-ui/core/Icon";
...
{["home", "star", "add_circle"].map((name) => (
<IconButton>
<Icon>{name}</Icon>
</IconButton>
))}
Live Demo
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.
I'm using the latest versions of react and semantic-ui-react
I have this Iconelement set up from semantic implementing navigation to an external link (github)
<Menu.Item
position="right"
to="https://github.com"
as={Link}
>
<Icon name="github" size="big" />
</Menu.Item>
When I click the icon in my UI, it's trying to append the github url to the url of my UI. So I'm at localhost:blah/someUrl it's requesting localhost:blah/someUrl/https://github.com
Is this an issue with routing or misuse of the <Icon> props?
It's rather a misuse of router link: If you want to link to external pages, don't use routers <Link> component.
It will work the following way:
<Menu.Item
href="https://github.com"
position="right"
target="_blank"
>
<Icon name="github" size="big" />
</Menu.Item>
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!