Good morning. I have seen many examples of displaying of the predefined icons in a MaterialUI Avatar component. E.g.
h<Avatar>
<BuildIcon />
</Avatar>
but I havent been able to find an example of displaying an icon from a prop field. For instance, I have a prop that specifies I want the build icon, I thought this would work
<Avatar>
<{prop.myIcon} />
</Avatar>
but I get errors. Does anybody know a nice way to display an icon within an Avatar from props?
thanks
Bill
You can set the icon for the Avatar using the children property.
Import MUI components
import Avatar from '#mui/material/Avatar';
import BuildIcon from '#mui/icons-material/Build';
Use the Avatar (and Icon)
You can use the children property to set the icon
<Avatar children={ BuildIcon } />
This is an alternative to the traditional child component
<Avatar>
{ BuildIcon }
</Avatar>
If you pass jsx as prop you have to use only {prop.myIcon}
For example:
<SomeComponent myIcon={<YourSampleIcon />} />
If you pass component you have to use <prop.myIcon /> to render icon:
For example:
<SomeComponent myIcon={YourSampleIcon} />
Hope this helps you.
Edit:
Material-UI has provided tons of icons already in their #material-ui/icons package. You can see all MUI icons here: https://material.io/resources/icons/ and import CammelCase icon name from #material-ui/icons. For example:
// icon name: all_inbox
import AllInboxIcon from '#material-ui/icons/AllInbox';
But there is second approach too. You can import Icon component from #material-ui/core/Icon and then place icon name in it to display icon:
For example:
import Icon from '#material-ui/core/Icon'
...
return <Icon>all_inbox</Icon>;
To get icon displayed you have to add this in your index.html file:<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> to impor Material Icons font.
Related
I have a DropDownButton
<DropDownButton text="i" items={items} />
that has padding around it
How would one remove that padding for just this one button not all of them on the site ?
See for more context
https://codesandbox.io/s/unruffled-snow-cx50hi
You can also pass buttonClass prop to that particular DropDownButton, I have also shown it here.
https://codesandbox.io/s/crazy-forest-1lvs7f?file=/app/main.tsx
Please check the props that are being passed to DropDownButton for a better understanding.
Add below css in a new file called style.css
button {
padding: 0 !important;
}
and import it in main.tsx as
import ./style.css
Whenever I add a tooltip to an SVG (using react-toolip), the tooltip shows twice:
The Code:
<HelpIcon data-tip='This field represents all sales (or revenues) generated by the company.'></HelpIcon>
<ReactTooltip effect='solid' place='left' multiline={true}/>
While using the HelpIcon from #mui:
import HelpIcon from '#mui/icons-material/Help';
import ReactTooltip from 'react-tooltip';
You can use Material UI tooltip also Its easy to manage and also long text can be used easily
import { Tooltip } from '#mui/material';
<Tooltip title='your tooltip title' >
<HelpIcon>
</Tooltip>
To solve this, define the data-for attribute and the id for the regarding tooltip:
<div data-tip='This field represents all sales (or revenues) generated by the company.' data-for='questionMarkToolTip'>
<HelpIcon></HelpIcon>
<ReactTooltip effect='solid' place='left' multiline={true} id='questionMarkToolTip'/>
</div>
I am using the react-vector-maps library to import JSON data into an SVG component so that I can listen for the clickable paths and this is working well.
import { VectorMap } from '#south-paw/react-vector-maps';
How though, can I modify this component so that it renders with an <image> tag?
<VectorMap {...Slide1map} layerProps={layerProps} width={950} />
I tried
<VectorMap {...Slide1map} layerProps={layerProps} width={950} src='image1.png' />
and I tried
<VectorMap {...Slide1map} layerProps={layerProps} width={950} href='image1.png' />
.... but this does not have the effect of loading the image. I have tried to make a background-image using CSS, but this is not responsive. Perhaps there is a way of making a responsive background image which would be feasible? Any ideas very welcome.
I have a Material Design TopAppBar Component that I want to add icons to. I'm using the RMWC, a React wrapper for Material Design Components.
See code example below:
import {
TopAppBar,
TopAppBarRow,
TopAppBarSection,
TopAppBarTitle,
TopAppBarNavigationIcon,
TopAppBarActionItem
} from '#rmwc/top-app-bar'
import '#material/top-app-bar/dist/mdc.top-app-bar.css';
function AppBar(props) {
return (
<div className='app-bar-container'>
<TopAppBar>
<TopAppBarRow>
<TopAppBarSection alignStart>
<TopAppBarNavigationIcon icon="menu"/>
<TopAppBarTitle>
{props.title}
</TopAppBarTitle>
</TopAppBarSection>
<TopAppBarSection alignEnd>
<TopAppBarActionItem icon="favorite" />
</TopAppBarSection>
</TopAppBarRow>
</TopAppBar>
</div>
)
}
export default AppBar```
In place of the icons is just the text "menu" and "favorites" when rendered.
I'm thinking I need to import material icons or some other icon library but have tried without success.
So it looks like I had to add a style reference to the material icons. Once I added the following in my index.html file the icons appeared:
In Material UI, I want to set borderRadius on my buttons. Passing the style attribute seem to work for FlatButton but not for RaisedButton.
For RaisedButton, the borderRadius is applied to the parent <div> (which is necessary) but not to <button> itself (which is also necessary)
Is this a bug in Material UI? Or is this behaviour intended? If it's intended, then how do I make a RaisedButton with rounded corners?
import React from 'react';
import RaisedButton from 'material-ui/lib/raised-button';
import FlatButton from 'material-ui/lib/flat-button';
export default class MyButtons extends React.Component {
render() {
return (
<div>
<FlatButton label="flat button" style={{borderRadius: '25px'}}/> {/*works*/}
<RaisedButton label="raised button" style={{borderRadius: '25px'}} /> {/*does not work*/}
</div>
);
};
}
This is the intended behaviour, and says so in the docs. For the record, you would never want a style prop to be passed to multiple children as no styles would make sense across all children - and how deep in nesting would you apply them?
But I think you're mixing concerns here. Using style on a component should only ever effect the root element - and that's assuming the developer chose to pass along the style tag, which they did.
But what you're looking to do is not style the component, but style the elements of the component. What you want to do is use a CSS class:
<RaisedButton label="raised button" className="raised-button--rounded" />
.raised-button--rounded,
.raised-button--rounded button {
border-radius: 25px; /* assuming one is not already defined */
}
NB: The developers do not intend for you to change the component styles that they have not specifically exposed. Through this approach, you will run into issues eventually.