How to add linear-gradient color to MUI Chip background?
Just set the background
to the desired gradient in your styles:
<Chip style={{width: 120, background: 'linear-gradient(to right bottom, #430089, #82ffa1)'}}>
<Avatar size={32} color={white} backgroundColor={indigo900}>A</Avatar>
This is a Chip
</Chip>
Note that linear-gradient
is a CSS function that returns an image, not a color. So, you have to set the background
property (which takes an image) rather than the backgroundColor
property (which takes just a color). Here's a quote from the Mozilla docs explaining this more thoroughly:
Because
<gradient>
s belong to the<image>
data type, they can only be used where<image>
s can be used. For this reason,linear-gradient()
won't work onbackground-color
and other properties that use the<color>
data type.
Gradient border on MUI component
This is how you add a gradient border to the button
component:
V5
const options = {
shouldForwardProp: (prop) => prop !== 'gradientColors',
};
const GradientButton = styled(
Button,
options,
)(({ theme, gradientColors }) => ({
border: '5px solid',
borderImageSlice: 1,
borderImageSource: `linear-gradient(to left, ${gradientColors.join(',')})`,
}));
If you want a round button with gradient border, you can't use the code above since borderImage
doesn't have a radius. A workaround is to create a gradient background in the child element :after
because the background
can be clipped using borderRadius
:
const borderRadius = 15;
const RoundGradientButton = styled(
Button,
options,
)(({ theme, gradientColors }) => ({
position: 'relative',
border: '5px solid transparent',
backgroundClip: 'padding-box',
borderRadius,
'&:after': {
position: 'absolute',
top: -5,
left: -5,
right: -5,
bottom: -5,
background: `linear-gradient(to left, ${gradientColors.join(',')})`,
content: '""',
zIndex: -1,
borderRadius,
},
}));
Usage
<GradientButton gradientColors={['red', 'yellow']} variant="contained">
Default
</GradientButton>
<RoundGradientButton gradientColors={['red', 'yellow']} variant="contained">
Default
</RoundGradientButton>
Live Demo
V4
const useStyles = makeStyles((theme: Theme) => ({
button: {
border: "6px solid",
borderImageSlice: 1,
borderImageSource: "linear-gradient(to left, red, orange)"
}
}));
export default function ContainedButtons() {
const classes = useStyles();
return (
<Button className={classes.button} variant="contained">
Default
</Button>
);
}
Live Demo
Related Answer
- How to add linear-gradient color to MUI Chip background?
Using props to set '&:hover' background-color
You can achieve this by creating your own custom chip component. In order to be able to use props to control the styling, you can use the makeStyles
. The makeStyles
function returns a hook that can accept an object parameter for providing variables to your styles.
Here's a possible CustomChip implementaton:
import React from "react";
import Chip from "@material-ui/core/Chip";
import { makeStyles } from "@material-ui/core/styles";
import { emphasize } from "@material-ui/core/styles/colorManipulator";
const useChipStyles = makeStyles({
chip: {
color: ({ color }) => color,
backgroundColor: ({ backgroundColor }) => backgroundColor,
"&:hover, &:focus": {
backgroundColor: ({ hoverBackgroundColor, backgroundColor }) =>
hoverBackgroundColor
? hoverBackgroundColor
: emphasize(backgroundColor, 0.08)
},
"&:active": {
backgroundColor: ({ hoverBackgroundColor, backgroundColor }) =>
emphasize(
hoverBackgroundColor ? hoverBackgroundColor : backgroundColor,
0.12
)
}
}
});
const CustomChip = ({
color,
backgroundColor,
hoverBackgroundColor,
...rest
}) => {
const classes = useChipStyles({
color,
backgroundColor,
hoverBackgroundColor
});
return <Chip className={classes.chip} {...rest} />;
};
export default CustomChip;
The styling approach (including the use of the emphasize
function to generate the hover and active colors) is based on the approach used internally for Chip
.
This can then be used like this:
<CustomChip
label="Custom Chip 1"
color="green"
backgroundColor="#ccf"
onClick={() => {
console.log("clicked 1");
}}
/>
<CustomChip
label="Custom Chip 2"
color="#f0f"
backgroundColor="#fcc"
hoverBackgroundColor="#afa"
onClick={() => {
console.log("clicked 2");
}}
/>
Here's a CodeSandbox demonstrating this:
Here's a Material-UI v5 version of the example:
import Chip from "@material-ui/core/Chip";
import { styled } from "@material-ui/core/styles";
import { emphasize } from "@material-ui/core/styles";
import { shouldForwardProp } from "@material-ui/system";
function customShouldForwardProp(prop) {
return (
prop !== "color" &&
prop !== "backgroundColor" &&
prop !== "hoverBackgroundColor" &&
shouldForwardProp(prop)
);
}
const CustomChip = styled(Chip, { shouldForwardProp: customShouldForwardProp })(
({ color, backgroundColor, hoverBackgroundColor }) => ({
color: color,
backgroundColor: backgroundColor,
"&:hover, &:focus": {
backgroundColor: hoverBackgroundColor
? hoverBackgroundColor
: emphasize(backgroundColor, 0.08)
},
"&:active": {
backgroundColor: emphasize(
hoverBackgroundColor ? hoverBackgroundColor : backgroundColor,
0.12
)
}
})
);
export default CustomChip;
MUI - Change Button text color in theme
Solved it! This finally did the trick:
const theme = createMuiTheme({
palette: {
primary: lightBlue,
},
overrides: {
MuiButton: {
raisedPrimary: {
color: 'white',
},
},
}
});
So, you just have to use "overrides" and be explicit about the exact type of component you want to change.
Is there a way to increase the border thickness of outlined buttons in material-ui?
Try: style={{ border: '2px solid' }}
or throught makeStyles
const useStyles = makeStyles(theme => ({
button: {
margin: theme.spacing(1),
border: '2px solid'
}
}));
function ThickerButton() {
return (
<>
<Button
variant="outlined"
color="primary"
style={{ border: '2px solid' }}
>
style
</Button>
<Button className={useStyles().button} variant="outlined" color="primary">
makeStyles
</Button>
</>
);
}
Demo:
Related Topics
Taghelpers Add Custom Class for Labeltaghelper Based on Validation Attribute [Required]
How to Use Pseudo-Elements (:After, :Before) Inside a Table Row
How to Allow Flex-Items to Grow While Keeping the Same Size
:Hover Not Working on Svg When Svg Is in External File
Reset Angle of Text in Skewed Div Using CSS
Select Element Without a Child
8-Digit Hex Is Not a Background-Color Value
How to Truncate String Inside a Direction Column Flexbox Child
How to Select the Element Prior to a Last Child
What Is the Math Behind -Webkit-Perspective
CSS Pointer-Events and Appearance Properties Not Recognized by CSS Validator
CSS Transition on an Initially Hidden Elemement
Css: Adding a Border Changes the Background-Color (!)
Help with Div - Make Div Fit the Remaining Width
How to Disable Anti-Aliasing in CSS When Using @Font-Face with Pixel Fonts