reactjs - 您可以在 Material UI 中添加额外的颜色吗?
问题描述
我已经有一个我正在尝试在 Material UI 中实现的样式指南。我可以看到 Button 的 color 道具采用以下选项:
| 'default'
| 'inherit'
| 'primary'
| 'secondary'
但是我需要一个额外的:
| 'default'
| 'inherit'
| 'primary'
| 'secondary'
| 'tertiary'
您能否在 Material UI 中创建一种与通用主题系统配合使用的新颜色?或者这不是它应该如何使用的吗?
解决方案
更新- 这个答案是为 Material-UI v4 编写的。v5 直接支持自定义颜色,我在最后添加了一个 v5 示例。
虽然 Material-UI 在 v4 中不直接支持此功能,但您可以包装Button
自己的自定义组件来添加此功能。
下面的代码使用textPrimary、outlinePrimary和containsPrimary 样式的副本,但将“primary”替换为“tertiary”。
import * as React from "react";
import Button from "@material-ui/core/Button";
import { makeStyles } from "@material-ui/core/styles";
import clsx from "clsx";
import { fade } from "@material-ui/core/styles/colorManipulator";
const useStyles = makeStyles(theme => ({
textTertiary: {
color: theme.palette.tertiary.main,
"&:hover": {
backgroundColor: fade(
theme.palette.tertiary.main,
theme.palette.action.hoverOpacity
),
// Reset on touch devices, it doesn't add specificity
"@media (hover: none)": {
backgroundColor: "transparent"
}
}
},
outlinedTertiary: {
color: theme.palette.tertiary.main,
border: `1px solid ${fade(theme.palette.tertiary.main, 0.5)}`,
"&:hover": {
border: `1px solid ${theme.palette.tertiary.main}`,
backgroundColor: fade(
theme.palette.tertiary.main,
theme.palette.action.hoverOpacity
),
// Reset on touch devices, it doesn't add specificity
"@media (hover: none)": {
backgroundColor: "transparent"
}
}
},
containedTertiary: {
color: theme.palette.tertiary.contrastText,
backgroundColor: theme.palette.tertiary.main,
"&:hover": {
backgroundColor: theme.palette.tertiary.dark,
// Reset on touch devices, it doesn't add specificity
"@media (hover: none)": {
backgroundColor: theme.palette.tertiary.main
}
}
}
}));
const CustomButton = React.forwardRef(function CustomButton(
{ variant = "text", color, className, ...other },
ref
) {
const classes = useStyles();
return (
<Button
{...other}
variant={variant}
color={color === "tertiary" ? "primary" : color}
className={clsx(className, {
[classes[`${variant}Tertiary`]]: color === "tertiary"
})}
ref={ref}
/>
);
});
export default CustomButton;
然后CustomButton
可以使用此组件代替Button
:
import React from "react";
import {
makeStyles,
createMuiTheme,
ThemeProvider
} from "@material-ui/core/styles";
import Button from "./CustomButton";
import lime from "@material-ui/core/colors/lime";
const useStyles = makeStyles(theme => ({
root: {
"& > *": {
margin: theme.spacing(1)
}
}
}));
const theme = createMuiTheme({
palette: {
tertiary: lime
}
});
// This is a step that Material-UI automatically does for the standard palette colors.
theme.palette.tertiary = theme.palette.augmentColor(theme.palette.tertiary);
export default function ContainedButtons() {
const classes = useStyles();
return (
<ThemeProvider theme={theme}>
<div className={classes.root}>
<Button variant="contained">Default</Button>
<Button variant="contained" color="primary">
Primary
</Button>
<Button variant="contained" color="secondary">
Secondary
</Button>
<br />
<Button variant="contained" color="tertiary">
Tertiary
</Button>
<Button color="tertiary">Tertiary text</Button>
<Button variant="outlined" color="tertiary">
Tertiary outlined
</Button>
</div>
</ThemeProvider>
);
}
在 v5 中,自定义按钮不是必需的。您需要做的就是适当地创建主题:
import React from "react";
import { styled, createTheme, ThemeProvider } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import { lime } from "@material-ui/core/colors";
const defaultTheme = createTheme();
const theme = createTheme({
palette: {
// augmentColor is a step that Material-UI automatically does for the standard palette colors.
tertiary: defaultTheme.palette.augmentColor({
color: { main: lime[500] },
name: "tertiary"
})
}
});
const StyledDiv = styled("div")(({ theme }) => ({
"& > *.MuiButton-root": {
margin: theme.spacing(1)
}
}));
export default function ContainedButtons() {
return (
<ThemeProvider theme={theme}>
<StyledDiv>
<Button variant="contained">Default</Button>
<Button variant="contained" color="primary">
Primary
</Button>
<Button variant="contained" color="secondary">
Secondary
</Button>
<br />
<Button variant="contained" color="tertiary">
Tertiary
</Button>
<Button color="tertiary">Tertiary text</Button>
<Button variant="outlined" color="tertiary">
Tertiary outlined
</Button>
</StyledDiv>
</ThemeProvider>
);
}
推荐阅读
- algorithm - 断开节点与图的连接
- jquery - Microsoft Edge PDF 滚动和突出显示问题
- networking - 收到RST后tcp syn重传?
- reactjs - 如何正确构建和使用 API 来为网页上的不同部分提供所需的数据?
- docker - Elasticsearch Docker,时间不是本地也不是UTC?
- c - 从 N 到 1000(包括)的数字的平均值,不包括能被 6 和 17 整除的偶数
- angular - 在 Angular 中包装 html 标签绑定的 UI 组件
- c++ - 在金属着色器代码中,如何定义函数的输入/输出参数变量?
- class - 布尔值不会将值从一个类更改为另一个
- node.js - 从 drive.files.get 获取可读流