how to use default theme colors like "primary" or "secondary" in sx property? I don't want to change them, I just want to write sx={{ backgroundColor: "primary" }} or smth like that
You need to be a bit more specific which color you want:
For example to access priamry.main, use:
<Box sx={{ borderColor: 'primary.main' }} />
or for the current text color:
<Box sx={{ color: 'text.secondary' }}>Sessions</Box>
More information
Related
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.
<Button component={Link} variant="text" to={link.path} sx={{ color: "#fff",'&:hover':{transform: 'translateY(-0.25em);'}}}>{link.label}</Button>
This is what I have tried so far with no sucsess
Is it possible to have &:hover in sx or do I have to create a style class in MUI?
Yes, you can use pseudo-selectors in the sx prop
Per MUI documentation
Superset of CSS
As part of the prop, you can use any regular CSS too: child or pseudo-selectors, media queries, raw CSS values, etc. Here are a few examples:
Using pseudo selectors:
<Box
sx={{
// some styles
":hover": {
boxShadow: 6,
},
}}
>
I am Using MUI and did everything to change the Color of the Text in a MUI Text Field and/or its background Color.
I followed the Documentation and tried:
const CssTextField = styled(TextField)({
And also Things inside the Component, such as
InputProps={{
style: { color: "red" }
}}
or
InputProps={{
color: "red"
}}
Nothing works for me and I don´t know why.
I hope that you can help me.
According to docs, InputProps accepts:
Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.
Therefore, style: { color: "red" } doesn't work because the aforementioned components don't accept the style prop and color prop accepts theme colors such as secondary , error etc.
You can customize the color and background of your TextField with sx prop:
<TextField
id="outlined-basic"
variant="outlined"
sx={{
input: {
color: "red",
background: "green"
}
}}
/>
Can you try
InputProps={{
backgroundColor: "red"
}}
instead of
InputProps={{
color: "red"
}}
Maybe
// Option 1
<TextField style ={{width: '100%'}} />
// Option 2
<TextField fullWidth />
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.
Here is my code. I have tried to use the material icon(PhoneInTalk) inside Tooltip's title attribute. But my process seems not working.
Here is my output:
enter image description here
//#material-ui/core/styles
const CustomTooltip = withStyles({
tooltip: {
color: "tomato",
backgroundColor: "black",
fontWeight: "bold",
fontSize: "12px",
},
})(Tooltip);
//JSX
<CustomTooltip
title={`${(<PhoneInTalk />)} Let's talk`}
placement="top-end"
arrow
>
<Avatar className={classes.avatar} src={avatar} alt="Ibrahim Kaiser" />
</CustomTooltip>
Try enclosing the icon and text in a fragment.
<CustomTooltip
title={<><PhoneInTalk /> Let's talk</>}
placement="top-end"
arrow
>
Check this example sandbox link