I'm new to using Material UI and have integrated into my portfolio website to create an ImageList that redirect to other projects I'd like to show possible employers. I'm having trouble editing the style of the text inside ImageListItemBar. I've tried using the primaryTypographyProps and sx to no avail. Could someone point me in the right direction?
<Typography variant="h3" color="common.red">
<ImageListItemBar
primaryTypographyProps={{fontSize: '30px'}}
sx={{
background: 'black',
}}
position="bottom"
title={item.title}
/>
</Typography>
//tried this as well
<ImageListItemBar
sx={{
color: '#000';
background: 'black',
}}
position="bottom"
title={item.title}
/>
Here is the code You are after:
<ImageListItemBar
title="image title"
subtitle="image subtitle"
sx={{
"& .MuiImageListItemBar-title": { color: "red" }, //styles for title
"& .MuiImageListItemBar-subtitle": { color: "yellow" }, //styles for subtitle
}}
/>
I recommend studying official MUI docs for ImageList and ImageListItemBar API
Hamed's answer is correct, you need to target the specific class applied to the title in order to style it.
I've been developing a pattern of doing this lately, where you can import the component's classes and style accordingly using styled. This allows you to use your IDE to autocomplete the class names and target them accordingly.
const StyledImageListItemBar = styled(ImageListItemBar)(() => ({
[`& .${imageListItemBarClasses.title}`]: {
color: "red"
},
[`& .${imageListItemBarClasses.subtitle}`]: {
color: "yellow"
},
backgroundColor: "black"
}));
Then you can just use the component without having to resort to sx:
export default function App() {
return (
<StyledImageListItemBar
title="This is a title"
subtitle="This is a subtitle"
/>
);
}
Here's a sandbox of this in action if you want to play with it: https://codesandbox.io/s/mui-targetting-classes-8y5kpm?file=/src/App.js
That being said, if you're planning to reuse this component with the custom styling, I would consider overriding the default styling in theme too.
I need to change my dropdown hover to green. I tried inline CSS and makeStyle(), But non of these are not working for me. I have no idea to change this hover color. If anyone can help me with this, I really appreciate it.
I need to change this hover color into green.
This is my code:-
<Select
className={dropDowStyle.select}
style={{
borderRadius: '8px', marginLeft: '-150px',
width: '163px', height: '45px', fontSize: '15px',
backgroundColor: "transparent",borderColor:primaryColor + "88"
}}
sx={{width: 163}}
// defaultValue=""
input={<OutlinedInput style={{borderColor: primaryColor + "88",}}/>}
displayEmpty
value={city}
renderValue={(value) => {
return (
<Box sx={{display: "flex", gap: 2.5}}>
<SvgIcon style={{fontSize: '20px'}}>
<LocationOnIcon/>
</SvgIcon>
{renderLocation && value}
</Box>
);
}}
onChange={cityValueHandler}
>
{shopLocation.map((option) => (
<MenuItem key={option.gg} value={option.gg}>
{option.gg}
</MenuItem>
))}
</Select>
The container of the menu list is a Paper which is part of the Menu (the dropdown of the Select). You can target the props of the nested component like below. See here for the list of Menu classNames. Also have a look at all classNames for the component states.
<Select
// to override the border color of the Select input
sx={{
"&:hover": {
"&& fieldset": {
border: "3px solid green"
}
}
}}
// to override the color of the dropdown container
MenuProps={{
PaperProps: {
sx: {
"& .MuiMenuItem-root.Mui-selected": {
backgroundColor: "yellow"
},
"& .MuiMenuItem-root:hover": {
backgroundColor: "pink"
},
"& .MuiMenuItem-root.Mui-selected:hover": {
backgroundColor: "red"
}
}
}
}}
Live Demo
You can use inputProps of Select and set the sx prop like this:
<Select
inputProps={{
sx: {
"&.MuiOutlinedInput-input:hover": {
border: "2px solid green"
}
}
}}
>
Just inspect the element you want to apply hover CSS.
https://mui.com/customization/how-to-customize/#overriding-nested-component-styles
For example find MuiSlider-thumb in the elements and try to apply on, discard the hash value in front
.MuiSlider-thumb:hover {
color:green;
}
or background to green.
Be careful as this might override all of the selects in your code base, so it might not be the best solution.
Is there any way to remove top and bottom padding from Menu component?
Tried to set padding to 0 in PaperProps and also in makeStyles but when I inspect the element on browser it still shows 8px default padding on top and bottom.
Here's the code if it helps:
<Menu
className={classes.menuSearchContainer}
PaperProps={{
style: {
backgroundColor: "#fff",
width: "270px",
paddingTop: '0px',
},
}}
>
<Input
className={classes.menuSearchInput}
type="text"
/>
target the list class from Menu classes prop.
<Menu
{...other props}
classes={{list:classes.list}}
>
{...meuItem}
</Menu>
and useStlyes will be:
const useStyles = makeStyles(() =>
createStyles({
list:{
padding:'0'
}
}),
);
Checkout a Codesandbox demo
use MenuListProps:
<Menu
className={classes.menuSearchContainer}
PaperProps={{
style: {
backgroundColor: "#fff",
width: "270px",
},
}}
MenuListProps={{ sx: { py: 0 } }}
>
<Input
className={classes.menuSearchInput}
type="text"
/>
Try this
<MenuItem dense=true />
From Materiul-UI dense : If true, compact vertical padding designed for keyboard and mouse input will be used.
This might be the issue.
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.