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>
Related
Is there a way to create a Box or a Paper with a title on top like this screenshot :
I'm talking about the top lefty title portion. I tried using a Box or a Paper component but it doesn't seem like the option is there.
Thank you for the help
You can change a Box's underlying element to a fieldset and add a legend element as a child of the MUI Box, but you'll probably want to apply a little styling to it as MUI does not offer styled versions of fieldset/legend.
import React from "react";
import Box from "#mui/material/Box";
const FieldsetExample = () => {
return (
<Box component="fieldset">
<legend>Jean-François H</legend>
Box content goes here.
</Box>
);
}
Renders:
Working CodeSandbox:
https://codesandbox.io/s/nostalgic-booth-09dwu7?file=/demo.js
Documentation References:
MUI Docs - Box API props (see component)
MDN Docs - <fieldset>: The Field Set element
I'm trying to make a simple slider that change the font size using React and Material UI.
The slider is called PrettoSlider and it a part of Material UI.
What im trying to acheive is to use the slider an then change the font size depending on the slider.
This is what i have so far
export default function ChangeFontSlider() {
const [ItemValue, setItemValue] = React.useState(20);
const handlingChange = (event) => {
setItemValue(event.target.value);
event.preventDefault();
}
return (
<>
<p style={{fontSize: {ItemValue}}}>Drag me to change the font</p>
<PrettoSlider
onChange={handlingChange}
value={ItemValue}
/>
</>
);
}
When trying to slide the slider, I ether get an error or the font remain the same.
Any idea? Thanks!
The slider is called PrettoSlider and it a part of Material UI.
PrettoSlider is an example. Underline component is Slider which is documented here https://material-ui.com/api/slider/.
Accroding to the document, onChange function has 2 parameters, event is the event source while second parameter value is new value when you move slider, is what you need to get data from.
I know this is 8 months old, But you could also just do this in your style tag
<p style={{fontSize: `${ItemValue}px` }}>Drag me to change the font</p>
then instead of just updating a number every time you slide, it will actually increment in pixels
in mui for change the font of slider label you can use global class in slider api.
import { makeStyles } from "#mui/styles";
const sliderStyles= makeStyles({
slider: {
'& .MuiSlider-markLabel' : {fontFamily: 'Vazir' , fontSize: "12px"}
}
})
and set this class to className prop in slider.
import { sliderStyles} from "YOUR/STYLES/PATH";
<Slider
valueLabelFormat={valueLabelFormat}
getAriaValueText={valuetext}
step={null}
valueLabelDisplay="on"
marks={sliderMarks}
className={classes.slider} //this line important
/>
import React from 'react';
import Button from '#material-ui/core/Button';
export default function DisableElevation() {
return (
<Button variant="contained" color="primary" disableElevation >
Disable elevation
</Button>
);
}
It is quite simple just make border:none and outline:none that's it for a corresponding component.
style={{
border:"none",
outline:"none"
}}
I also got this issue
The problem was using both MUI and bootstrap. remove importing 'bootstrap/dist/css/bootstrap.min.css' in project and after remove bootstrap, problem will solve
you don't need this both libraries for ui dev works you can do most of things by using one. You can use either MUI or bootstrap as your wish but using both in same project cause to UI effects
I am using material UI. also it has taken a lot of time to figure it out how to remove it after clicking the border. I found a way to remove the border using the below code it will help.
"&.MuiDataGrid-cell:focus-within": {
outline: "none",
},
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.
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: