覆盖material-ui样式

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

如果允许className指定属性，则除了组件应用的 CSS 类之外，您还可以应用该 CSS 类（而不是如Ido 的选项 1 中所示）。如果使用创建覆盖makeStyles，那么只要在导入组件后makeStyles调用覆盖的调用，它们将胜过默认样式（有关这方面的更多详细信息，请参阅最后我的相关答案 - 使用典型用法，这将按照您想要的方式工作）。

下面是一个工作示例，说明了这是如何工作的。关于我的示例版本MediumButton需要注意的一些其他方面：

• 使用children而不是buttonText道具
• 放置始终应用的通用样式（无论媒介按钮color属性如何，这些样式都应该相同）) into a separate CSS class (
• 传递给button元素任何未在 中明确使用的附加属性MediumButton。这使得传入事件处理程序（例如）或由（例如）onClick支持的其他属性变得容易，而无需添加额外的代码来处理这些属性。buttondisabledMediumButton
• 使用 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;

索引.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：

• 从单个文件导出的 Material UI v4 makeStyles 不会在刷新时保留样式
• React Material-UI 中“makeStyles”的内部实现？