I tried with fontSize and with height and width but it doesn't work.
Example:
/*Component code */
<Tooltip title="Disminuir cuotas">
<IconButton
className={clsx(classes.quotaIcons, classes.minusIcon, {
[classes.quotaIconsRight]: buttonsToTheRight
})}
size="small"
color="primary"
onClick={() => handleBillingsNumber('minus')}
>
<RemoveIcon />
</IconButton>
</Tooltip>
/*Component code */
const useStyles = makeStyles(theme => ({
quotaIcons: {
fontSize: 32,
color: theme.palette.primary.main
},
minusIcon: {
marginRight: theme.spacing(2)
},
quotaIconsRight: {
fontSize: 8
},
});
Use fontSize="inherit" prop in your icon component from #material-ui/icons, then the way we can see above will work.
<RemoveIcon fontSize="inherit"/>
below i have different icons from material UI , which currently displays a grey circle whenever i hover on any of them , i want to remove this grey circle and i want each icon to change to a specific color whenever i hover over it i looked at the documentation in material ui but couldn't find anything that explains it , appreciate your feedback.
<Box className={classes.socialmedia}>
<IconButton aria-label="twitter">
<TwitterIcon />
</IconButton>
<IconButton aria-label="facebook">
<FacebookIcon />
</IconButton>
<IconButton aria-label="instagram">
<InstagramIcon />
</IconButton>
<IconButton aria-label="Youtube">
<YouTubeIcon />
</IconButton>
<IconButton aria-label="Apple">
<AppleIcon />
</IconButton>
</Box>
In order to remove the grey circle displaying in background on hover then you can use disableFocusRipple & disableRipple property in IconButton component and set style={{ backgroundColor: 'transparent' }}.
Ex:
<IconButton
disableFocusRipple
disableRipple
style={{ backgroundColor: "transparent" }}
aria-label="twitter"
>
<TwitterIcon className={classes.twitter} />
</IconButton>
To change the color of icon on hover then use hover selector.
Ex:
const useStyles = makeStyles({
twitter: {
"&:hover": {
color: "#00acee"
}
}
});
I've created a quick example to illustrate the solution in codesandbox:
https://codesandbox.io/s/elegant-ramanujan-wnj9fw?file=/index.js:948-961
Define a hook. Import makeStyle from '#material-ui/core/styles'.
const useStyles = makeStyle(() => ({
styleRed: {
'&:hover': {
backgroundColor: '#f00'
}
},
styleBlue: {
'&:hover': {
backgroundColor: '#00f'
}
}
}));
Then in your component:
// using our hook
const {styleRed, styleBlue} = useStyles();
// some more code
return (
<>
<IconButton aria-label="twitter" classes={styleRed}>
<TwitterIcon />
</IconButton>
<IconButton aria-label="facebook" classes={styleBlue}>
<FacebookIcon />
</IconButton>
</>
)
I want to change the font size of the label in material ui badge.
I am using style={{ fontSize: "15" }} but that only affect its child, which is an icon.
Code:
<Badge badgeContent={props.cartCount} color="secondary" style={{ fontSize: "15" }}>
<ShoppingCart className={classes.mediumIcon} />
</Badge>
Ideal way would be use classes badge as mentioned in documentation
import { Badge } from "#material-ui/core";
import { makeStyles } from "#material-ui/core/styles";
import "./styles.css";
const useStyles = makeStyles((theme) => ({
badge: {
fontSize: 30
}
}));
export default function App() {
const classes = useStyles();
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Badge
badgeContent={"h"}
color="secondary"
classes={{ badge: classes.badge }}
/>
</div>
);
}
If you use mui system then this can change badge font size
<Badge
badgeContent={9}
color="error"
overlap="circular"
sx={{ "& .MuiBadge-badge": { fontSize: 9, height: 15, minWidth: 15 } }}
>
<IconButton sx={{ p: 0, color: "primary.main" }}>
<Notifications />
</IconButton>
</Badge>
You can modify the font-size as below.
create styles of different font-size in useStyles
const useStyles = makeStyles((theme) => ({
font1: {
fontSize: "1rem"
},
)}
And then assign it as below to the Badge component
<Badge
classes={{
badge: classes.font1
}}
badgeContent={99}
{...defaultProps}
/>
Sandbox
You can use the componentProps attribute as follows (this example changes the color of the text in the badge but the same principle will work for fontSize).
<Badge badgeContent={comments} componentsProps={{ root: {style: {color: 'white'}} }}>
<CommentIcon />
</Badge>
Using material-ui in my react app, is there a way I can change the position when the dialog is opened? now it's always centered.
Thanks in advance!
You can create styles and pass it through classes prop. Here is an example of how you could do that.
import React from 'react';
import { makeStyles, Dialog } from '#material-ui/core';
const useStyles = makeStyles({
dialog: {
position: 'absolute',
left: 10,
top: 50
}
});
function Example() {
const classes = useStyles();
return (
<Dialog
classes={{
paper: classes.dialog
}}
/* rest of the props */
>
{/* content of the dialog */}
</Dialog>
);
}
I would say don't use position: absolute, it could break the scrolling behavior. The position was control differently with scroll='paper' or scroll='body'
You can use the following code to always align your dialog to the top of the page with two custom classes.
Demo: codesandbox.io
See the original article with explanation
const useStyles = makeStyles({
topScrollPaper: {
alignItems: 'flex-start',
},
topPaperScrollBody: {
verticalAlign: 'top',
},
})
function SimpleDialog(props: SimpleDialogProps) {
const classes = useStyles()
return (
<Dialog
onClose={handleClose}
aria-labelledby="simple-dialog-title"
open={open}
scroll="paper"
classes={{
scrollPaper: classes.topScrollPaper,
paperScrollBody: classes.topPaperScrollBody,
}}
></Dialog>
)
}
For MUI 5, we can use both SxProps and styled() utility:
Via SxProps:
// flex-start: to position it at the top
// flex-end: to position it at the bottom
// center: to position it at the center
const sx: SxProps = {
"& .MuiDialog-container": {
alignItems: "flex-start"
}
};
<Dialog
open={infoModalOpen}
onClose={() => setInfoModalOpen(false)}
sx={sx}
scroll="paper"
>
....
</Dialog>
Via styled components:
const StyledDialog = styled(Dialog)(({theme}) => ({
"& .MuiDialog-container": {
alignItems: "flex-start"
}
}));
<StyledDialog
open={infoModalOpen}
onClose={() => setInfoModalOpen(false)}
sx={sx}
scroll="paper"
>
....
</StyledDialog>
#radovix's and #Sumit Wadhwa's answers are correct. In case you don't want to use makeStyles, Here is how I resolved it.
When scroll="body";
<Dialog
fullWidth
onClose={() => setOpen(false)}
open={true}
scroll="body"
PaperProps={{ sx: { mt: "50px", verticalAlign: "top" } }}
>
{/* Dialog Content here */}
</Dialog>;
When scroll="paper";
<Dialog
fullWidth
onClose={() => setOpen(false)}
open={true}
scroll="paper"
sx={{
"& .MuiDialog-container": {
alignItems: "flex-start",
},
}}
PaperProps={{ sx: { mt: "50px" } }}
>
{/* Dialog Content here */}
</Dialog>;
You can adjust the margin-top however you like
I am new to React and am using the npm package Material UI icons (https://www.npmjs.com/package/#material-ui/icons) and displaying icons within a React component as such:
Importing:
import KeyboardArrowRightIcon from 'material-ui/svg-icons/hardware/keyboard-arrow-right';
and rendering:
readMoreLink={<a href={someUrl} >Read more <KeyboardArrowRightIcon /></a>}
However, since KeyboardArrowRightIcon is an SVG provided by the npm package, it comes with it's own fill colour:
Eg: <svg viewBox="0 0 24 24" style="display: inline-block; color: rgba(0, 0, 0, 0.54);...
I know I can override this colour by having a style attribute within the element, eg:
<KeyboardArrowRightIcon style={{ fill: '#0072ea' }} />
But is there anyway to make this a SCSS variable (style={{ fill: $link-color }})?
I worry if the link colour changes in the style sheet someone will have to hunt down all these hard coded instances later.
Change Icon Color
<HomeIcon />
<HomeIcon color="primary" />
<HomeIcon color="secondary" />
<HomeIcon color="action" />
<HomeIcon color="disabled" />
<HomeIcon style={{ color: green[500] }} />
<HomeIcon style={{ color: 'red' }} />
Change Icon Size
<HomeIcon fontSize="small" />
<HomeIcon />
<HomeIcon fontSize="large" />
<HomeIcon style={{ fontSize: 40 }} />
MDI using Icon component
<Icon>add_circle</Icon>
<Icon color="primary">add_circle</Icon>
<Icon color="secondary">add_circle</Icon>
<Icon style={{ color: green[500] }}>add_circle</Icon>
<Icon fontSize="small">add_circle</Icon>
<Icon style={{ fontSize: 30 }}>add_circle</Icon>
For the Font
<Icon className="fa fa-plus-circle" />
<Icon className="fa fa-plus-circle" color="primary" />
<Icon className="fa fa-plus-circle" color="secondary" />
<Icon className="fa fa-plus-circle" style={{ color: green[500] }} />
<Icon className="fa fa-plus-circle" fontSize="small" />
<Icon className="fa fa-plus-circle" style={{ fontSize: 30 }} />
Resouces to learn more abo it, Icons
Just add a style fill: "green"
Example: <Star style={{fill: "green"}}/>
The simplest way to specify/override the color of an Icon in Material-UI is to use a custom CSS class name.
Suppose that you want to show a green checkbox rather than a red triangle, depending on the outcome of some process.
You create a function somewhere inside your code, for example like this:
function iconStyles() {
return {
successIcon: {
color: 'green',
},
errorIcon: {
color: 'red',
},
}
}
You then apply makeStyles to that function, and run the result.
import { makeStyles } from '#material-ui/core/styles';
...
const classes = makeStyles(iconStyles)();
Inside your render function, you can now use the object classes:
const chosenIcon = outcome
? <CheckCircleIcon className={classes.successIcon} />
: <ReportProblemIcon className={classes.errorIcon} />;
The function I mentioned first in this answer actually accepts a theme as input and allows you to modify/enrich that theme: this ensures that your custom classes aren't seen as exceptions, but rather as integrations inside a more comprehensive visual solution (for example, icon colors in a theme are best seen as encodings).
Material-UI is very rich and I'd encourage you to explore also other existing customisation mechanisms.
Update: 2022 July MUI5
There are multiple ways to change icon color
<HomeIcon sx={{color: "#FC0"}} />
<HomeIcon htmlColor="red" />
<HomeIcon color="primary" />
<HomeIcon color="success" />
<HomeIcon color="action" />
<HomeIcon color="disabled" />
<HomeIcon color="error" />
<HomeIcon sx={{ color: pink[500] }} />
Using sx prop you can specify any hex/rgb color code or colors from your theme palette
Example :
import { red } from '#mui/material/colors';
<HomeIcon sx={{ color: red[800] }} />
This is what I do
I use MUI v4.5.1. Use the color prop API with value inherit and add a div or span wrapper around and add your color there.
From the API docs
color default value:inherit. The color of the component. It supports those theme colors that make sense for this component.
Add star icon
import React from 'react';
import Star from '#material-ui/icons/StarRounded';
import './styles.css';
export function FavStar() {
return (
<div className="star-container">
<Star size="2em" fontSize="inherit" />
</div>
);
}
In style.css
.star-container {
color: red;
font-size: 30px;
}
You can do like this: <PlusOne htmlColor="#ffaaee" />
The simplest way I found is using the following.
import { styled } from '#material-ui/styles';
import { Visibility } from '#material-ui/icons';
const MyVisibility = styled(Visibility)({
color: 'white',
});
You can set a default color for all icons by creating a custom theme with createMuiTheme():
createMuiTheme({
props: {
MuiSvgIcon: {
htmlColor: '#aa0011',
}
}
})
This will set the default value of the htmlColor prop for every icon like <KeyboardArrowRightIcon/>. Here's a list of other props you can set.
Overwriting the material UI Icon color like below
in js
const [activeStar, setActiveStar] = useState(false);
<IconButton onClick={() => setActiveStar(!activeStar)}>
{activeStar ? (
<StarOutlined className="starBorderOutlined" />
) : (
<StarBorderOutlined />
)}
</IconButton>
in Css
.starBorderOutlined {
color: #f4b400 !important;
}
Surprised that no one has suggested a site-wide solution yet.
You can override the colors that are assigned for the "colors" option here https://material-ui.com/api/icon/#props
by adding an override to your theme (you'll have to define a custom theme if you aren't already) https://material-ui.com/customization/theming/#createmuitheme-options-args-theme
After defining a theme though, it's as simple as
const theme = createMuiTheme({
"overrides": {
MuiSvgIcon: {
colorPrimary: {
color: ["#625b5b", "!important"],
},
colorSecondary: {
color: ["#d5d7d8", "!important"],
},
},
...
});
Only correct solution that covers two tone (TwoTone) icons is to pass it htmColor property:
React.createElement(Icon, {htmlColor: "#00688b"})
To change color of your MUI Icons your have three ways: (Source)
//using a hex value
<BathroomIconOutlined style={{ color: "#ffee66" }} />
//using a standard css colour
<BathroomTwoToneIcon style={{ color: "blue" }} />
//import a material ui colour, and use that
import { purple } from "#mui/material/colors";
<BathroomIcon style={{ color: purple[500] }} />
Or use directly the MUI properties: (Source)
import SearchOutlined from '#mui/icons-material/SearchOutlined';
<SearchOutlined style={{ color: 'primary', fontSize: "small" }} />
<SearchOutlined style={{ color: 'secondary', fontSize: "medium" }} />
<SearchOutlined style={{ color: 'action', fontSize: "large" }} />
<SearchOutlined style={{ color: 'error', fontSize: 16 }} />
<SearchOutlined style={{ color: 'disabled', fontSize: 16 }} />
You can use SvgIcon, from the documentation:
The SvgIcon component takes an SVG path element as its child and
converts it to a React component that displays the path, and allows
the icon to be styled and respond to mouse events. SVG elements should
be scaled for a 24x24px viewport.
You must use the devTools to extract the path of the KeyboardArrowRightIcon icon:
Then use it with your custom color like this:
<SvgIcon
component={svgProps => {
return (
<svg {...svgProps}>
{React.cloneElement(svgProps.children[0], {
fill: myColorVariable
})}
</svg>
);
}}
>
<path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"></path>
</SvgIcon>
I had the same problem, me solution was:
import React from 'react';
import pure from 'recompose/pure';
import {SvgIcon} from '#material-ui/core';
let smile = (props) => (
<SvgIcon {...props}
component={props => {
return (
<svg {...props}>
{React.cloneElement(props.children[0], {
fill: "#4caf50"
})}
</svg>
);
}}
>
<path d="M256,32C132.281,32,32,132.281,32,256s100.281,224,224,224s224-100.281,224-224S379.719,32,256,32z M256,448
c-105.875,0-192-86.125-192-192S150.125,64,256,64s192,86.125,192,192S361.875,448,256,448z M160,192c0-26.5,14.313-48,32-48
s32,21.5,32,48c0,26.531-14.313,48-32,48S160,218.531,160,192z M288,192c0-26.5,14.313-48,32-48s32,21.5,32,48
c0,26.531-14.313,48-32,48S288,218.531,288,192z M384,288c-16.594,56.875-68.75,96-128,96c-59.266,0-111.406-39.125-128-96"></path>
</SvgIcon>
);
smile = pure(smile);
smile.displayName = 'smile';
smile.muiName = 'SvgIcon';
export default smile;
Solution that works the best for myself:
const EditableIcon = ({ icon, color, sx }: PropsWithChildren<EditableIconProps>) => {
const c = useIconStyles()
return React.cloneElement(icon, {
...(color && { color }),
...(sx && { sx }),
classes: {
colorPrimary: c.colorPrimary,
colorSecondary: c.colorSecondary,
colorAction: c.colorAction
}
})
}
If color is set, your classes would override default values.