css - 重写 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 prop 如何都应该相同的样式)放入始终应用的单独 CSS 类 (mediumButton`)
• 将任何未在 MediumButton 中明确使用的附加属性传递给 button 元素。这使得传递事件处理程序(例如 onClick)或 button 支持的其他属性(例如 disabled)变得容易，而无需添加额外的代码在 MediumButton 中处理这些 Prop 。
• 使用 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 生成的多个类进行分层时哪些样式会胜出的相关答案:

• Material UI v4 makeStyles exported from a single file doesn't retain the styles on refresh
• Internal implementation of "makeStyles" in React Material-UI?