Переопределение стилей материала-интерфейса

Question

Я нашел несколько сообщений, касающихся переопределения стилей, но ничего похожего на проблему, с которой я столкнулся. Я создаю стилизованные компоненты material-ui и импортирую их в разные части моего приложения. Я хочу иметь возможность переопределить некоторые из моих стилей из различных родительских компонентов.

У меня есть компонент кнопки:

import React from "react";
import { makeStyles } from "@material-ui/styles";

const useStyles = makeStyles({
  buttonBlue: {
    background: "#09a1e2",
    border: "1px solid #09a1e2",
    borderRadius: "5px",
    color: "#ffffff",
    cursor: "pointer",
    fontSize: "1.25rem",
    padding: ".75rem 1.25rem .75rem 1.25rem",
    "&:hover": {
      backgroundColor: "#ffffff",
      color: "#09a1e2"
    }
  },
  buttonWhite: {
    background: "#ffffff",
    border: "1px solid #666666",
    borderRadius: "5px",
    cursor: "pointer",
    fontSize: "1rem",
    padding: ".5rem",
    width: "6rem",
    "&:hover": {
      backgroundColor: "#666666",
      color: "#ffffff"
    }
  }
});

const MediumButton = props => {
  const color = props.color;
  const classes = useStyles();
  return (
    <div>
      {color === "blue" ? (
        <button className={classes.buttonBlue}>{props.buttonText}</button>
      ) : (
        <button className={classes.buttonWhite}>{props.buttonText}</button>
      )}
    </div>
  );
};

export default MediumButton;

, который я буду импортировать в другой компонент. Я хочу переопределить некоторые из этих стилей в моем новом компоненте, но я не могу понять, как именно.

Вот что я пытаюсь:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import { withContext } from "../../context/AppContext";
import MediumButton from "../components/MediumButton";

const useStyles = makeStyles({
    root : {
        display: "flex",
    },
    homeButton: {
        background: "white",
        border: "1px solid #09a1e2",
        borderRadius: "5px",
        color: "#09a1e2",
        cursor: "pointer",
        fontSize: "1.25rem",
        padding: ".5rem 3.25rem .5rem 3.25rem",
        textDecoration: 'none',
        "&:hover": {
            backgroundColor: "#ffffff",
            color: "#09a1e2"
        }

    }
});

const PageNotFound = () => {

  const classes = useStyles();
  return (
    <div className={classes.root}>

      <MediumButton className={classes.homeButton} />
    </div>
  );
};

export default withContext(PageNotFound);

Я не уверен, чтоМне нужно позвонить, чтобы переопределить стили, которые я установил для моего компонента MediumButton.

Answer 1

Поскольку вы создали MediumButton , вы можете решить, как разрешить другим компонентам переопределять стиль по умолчанию.

Вариант 1: Заменить весь стиль по умолчаниюэто отправить реквизит className от отца (так же, как вы это сделали), и в MediumButton применить следующие стили, если предусмотрено:

const MediumButton = props => {
  const { className, color } = props;
  const classes = useStyles();

  return (
    <div>
      {color === "blue" ? (
        <button className={className || classes.buttonBlue}>{props.buttonText}</button>
      ) : (
        <button className={className || classes.buttonWhite}>{props.buttonText}</button>
      )}
    </div>
  );
};

Вариант 2: Замените только нужные свойства и сохраните стили по умолчанию. Отправьте дополнительные элементы стилей в MediumButton и обработайте их в makeStyles:

import React from "react";
import { makeStyles } from "@material-ui/styles";

const useStyles = makeStyles({
  ........your other styles........
  additionalStyles: props => ({
    ...props
  }),
});

const MediumButton = props => {
  const { additionalStyles, color } = props;
  const classes = useStyles(additionalStyles);

  return (
    <div>
      {color === "blue" ? (
        <button className={`${classes.buttonBlue} ${classes.additionalStyles}`}>
          {props.buttonText}
        </button>
      ) : (
        <button className={`${classes.buttonWhite} ${classes.additionalStyles}`}>
          {props.buttonText}
        </button>
      )}
    </div>
  );
};

export default MediumButton;

Answer 2

Если вы разрешите указывать свойство className, вы можете применить этот класс CSS в дополнение к классам CSS, применяемым вашим компонентом (в отличие от вместо какпоказано в варианте Ido 1). Если переопределения создаются с использованием makeStyles, то они будут иметь преимущество над стилем по умолчанию, если вызов makeStyles для переопределений называется после импорта компонента (см. Мои соответствующие ответы в конце дляподробнее об этом аспекте - при типичном использовании это будет работать так, как вы хотите).

Ниже приведен рабочий пример того, как это может работать. Некоторые дополнительные аспекты моей примерной версии MediumButton, на которые следует обратить внимание:

• Использует children вместо buttonText prop
• Помещает общие стили (те, которые должны бытьто же самое независимо от color prop ) into a separate CSS class ( mediumButton`), который всегда применяется
• Передает элементу button любые дополнительные реквизиты, явно не используемые в MediumButton. Это позволяет легко передавать обработчики событий (например, onClick) или другие свойства, поддерживаемые button (например, disabled), без необходимости добавлять дополнительный код в MediumButton для обработки этих реквизитов.
• Использует clsx для удобного объединения нескольких имен классов. clsx используется внутри Material-UI, поэтому это ничего не добавит к размеру вашего комплекта.

MediumButton.js

import React from "react";
import { makeStyles } from "@material-ui/styles";
import clsx from "clsx";

const useStyles = makeStyles({
  mediumButton: {
    borderRadius: "5px",
    cursor: "pointer",
    fontSize: "1.25rem",
    padding: ".75rem 1.25rem .75rem 1.25rem",
    margin: 8
  },
  buttonBlue: {
    background: "#09a1e2",
    border: "1px solid #09a1e2",
    color: "#ffffff",
    "&:hover": {
      backgroundColor: "#ffffff",
      color: "#09a1e2"
    }
  },
  buttonWhite: {
    background: "#ffffff",
    border: "1px solid #666666",
    "&:hover": {
      backgroundColor: "#666666",
      color: "#ffffff"
    }
  }
});

const MediumButton = ({ className, children, color, ...other }) => {
  const classes = useStyles();
  return (
    <button
      {...other}
      className={clsx(
        classes.mediumButton,
        {
          [classes.buttonBlue]: color === "blue",
          [classes.buttonWhite]: color !== "blue"
        },
        className
      )}
    >
      {children}
    </button>
  );
};

export default MediumButton;

index.js

import React from "react";
import ReactDOM from "react-dom";
import { makeStyles } from "@material-ui/styles";

import MediumButton from "./MediumButton";

const useStyles = makeStyles({
  homeButton: {
    background: "white",
    color: "#09a1e2",
    border: "1px solid #09a1e2",
    padding: ".5rem 3.25rem .5rem 3.25rem",
    textDecoration: "none",
    "&:hover": {
      backgroundColor: "#ffffff",
      color: "#09a1e2"
    }
  }
});
function App() {
  const classes = useStyles();
  return (
    <div className="App">
      <MediumButton onClick={() => alert("You clicked me!")}>
        White Button
      </MediumButton>
      <MediumButton color="blue">Blue Button</MediumButton>
      <MediumButton className={classes.homeButton}>Home Button</MediumButton>
      <MediumButton className={classes.homeButton} color="blue">
        Blue Home Button
      </MediumButton>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Соответствующие ответы для понимания того, какие стили выиграют при наложении нескольких классов, созданных с помощью makeStyles:

• Пользовательский интерфейс материала v4 makeStyles, экспортированные из одного файла, не сохраняют стили при обновлении
• Внутренняя реализация "makeStyles" в React Material-UI?