Можете ли вы добавить дополнительный цвет в UI материала?

Question

У меня уже есть руководство по стилям, которое я пытаюсь реализовать в Material UI. Я вижу, что свойство цвета кнопки принимает следующие параметры:

| 'default'
| 'inherit'
| 'primary'
| 'secondary'

Однако мне нужен дополнительный:

| 'default'
| 'inherit'
| 'primary'
| 'secondary'
| 'tertiary'

Можете ли вы создать новый цвет в пользовательском интерфейсе материала, который работает с общим система тематики? Или это не совсем то, как это предполагается использовать?

Answer 1

Хотя Material-UI не поддерживает это напрямую, вы можете обернуть Button в свой собственный компонент, чтобы добавить эту функциональность.

В приведенном ниже коде используется копия стилей для textPrimary , outlinedPrimary и 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>
  );
}

Answer 2

Взято из документации цветовой палитры пользовательского интерфейса материала, https://material-ui.com/customization/palette/

Цветовое намерение - это сопоставление цвета палитры с заданным намерением в вашем приложении. Тема предоставляет следующие цвета палитры (доступные в theme.palette.):

primary - используется для представления основных элементов интерфейса для пользователя. Это цвет, который чаще всего отображается на экранах и компонентах вашего приложения.

вторичный - используется для представления вторичных элементов интерфейса для пользователя. Это дает больше возможностей выделить guish ваш продукт. Наличие его не является обязательным.

ошибка - используется для представления элементов интерфейса, о которых следует знать пользователю.

предупреждение - используется для представления потенциально опасные действия или важные сообщения.

информация - используется для представления пользователю нейтральной и необязательно важной информации.

успех - используется для обозначения успешного завершения действия, инициированного пользователем. Если вы хотите узнать больше о цвете, вы можете заглянуть в раздел цветов.

Так что вы, вероятно, могли бы подумать о переназначении любой из кнопок предупреждения / успеха / информации / ошибки. Обычно я сохраняю ошибку и предупреждаю цвета как красные, поэтому палитру предупреждений можно будет свободно переназначить для меня.