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>
Related
I've created a React RTK application with mainly MUI Components.
Suddenly (and I can' reconstruct where when or why) the Mui <Badge> is not showing in my app, although it is in plain sight in the DevTools, elements.
The code that leads to this example page is:
import { Badge, Button } from "#mui/material";
import React from "react";
export default () => (
<div>
<Badge variant="dot" badgevalue={10}>
<Button variant="outlined">test</Button>
</Badge>
</div>
);
I've tried a lot, but with no succes. Can anyone help me out what the problem is here?
you have not added color props to badge. thats why its not displaying. also I checked the badge API. there is no badgeValue props. but there is badgeContent props. https://mui.com/api/badge/
<div>
<Badge variant="dot" badgevalue={10} color="primary">
<Button variant="outlined">test</Button>
</Badge>
<Badge variant="dot" badgeContent={10} color="primary">
<Button variant="outlined">test</Button>
</Badge>
</div>
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 have an issue with my icons displaying:
Here is my code:
import SearchIcon from '#material-ui/icons/Search';
<Button variant='contained' className={classes.sendButton}>
Search
<img src={SearchIcon} alt='search'/>
</Button>
However, in the UI it gets rendered with the default 'broken-page' symbol. There is no error in console.
I have npm installed the latest #material-ui/icons=^4.9.1
I am unable to ascertain what is causing this issue.
Thanks
Ciao, to show Material UI icon is not necessary to use img tag. Just write:
import SearchIcon from '#material-ui/icons/Search';
<Button variant='contained' className={classes.sendButton}>
Search
<SearchIcon />
</Button>
And you should see your icon in button.
Anyway, I suggest you to use startIcon Button prop like:
<Button
variant='contained'
className={classes.sendButton}
startIcon={<SearchIcon />}
>
Search
</Button>
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>
I am using Material UI, and I have the following:
import IconButton from 'material-ui/IconButton';
<IconButton iconClassName="muidocs-icon-custom-github" tooltip="bottom-right" tooltipPosition="bottom-right" />
When I am testing the tooltip, the icons are not showing, but the tooltip is showing on hover. Can someone help me create an example? Am I missing the icon URL?
It seems that's an issue with Material-UI docs. Check this Link for more details
If you want to place github icon then you can try using SVG Icon. It seems you have to include google material icons stylesheet in your index.html to make it work.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Generally if we want to use svg icons I do it below way.
import IconButton from 'material-ui/IconButton';
import Remove from 'material-ui/svg-icons/Content/remove';
<IconButton tooltip="Hide" style={{float: 'right'}} iconStyle={{marginTop: -25, color: myTheme.color}} onClick={this.removeMinus}>
<Remove color=“red” />
</IconButton>
Make sure your <IconButton> has a child component that is an icon. In your example it is not rendering anything on the screen (unless you hover) because it has no icon reference.
I think your code is not correct, if you want to use IconButton, you should
has an instance icon inside the IconButton, the code like this:
<IconButton>
<DeleteIcon />
</IconButton>