使用 makeStyles 覆盖现有的 Mui 类

Question

所以，我认为这可能是一个非常微小的实施问题。我曾经将样式表与我的 component.js 文件完全分开，但最近，我开始看到使用样式化组件、情感、制作样式等在组件内编写样式的一些好处。我在一个虚拟项目上进行了尝试并开始实现我现在正在开发的应用程序的一些组件上。原因主要是更易于管理、开发经验，而且它对我有用。

但后来我发现自己陷入了覆盖现有 mui 样式的问题。

例如，我正在使用 material-ui 来制作这个手风琴组件。还有一个嵌套属性

.MuiAccordionSummary-root.Mui-expanded {
    min-height: 64px;
}

编辑这是我的 sass 文件会很容易，但是如何使它与 make 样式一起使用？

我现在的样式是这样的

const useStyles = makeStyles((theme) => ({
  root: {
    borderBottom: '0.5px solid',
    borderBottomColor: theme.palette.primary.main,
    marginBottom: '16px',
    maxHeight: '35px',
  },
  summary: {
    backgroundColor: theme.palette.complimentory.main,
    borderBottom: '0.5px solid',
    borderBottomColor: theme.palette.primary.main,
    maxHeight: '35px',
    height: '35px',
  },
  title: {
    fontFamily: 'Helvetica',
    fontStyle: 'normal',
    fontWeight: 'normal',
    fontSize: '14px',
    lineHeight: '14px',
    letterSpacing: '0.266667px',
    textTransform: 'uppercase',
  },
  content: {
    marginTop: '15px',
    fontSize: '14px',
    fontStyle: 'normal',
    lineHeight: '16.8px',
    letterSpacing: '0.375px',
    fontWeight: '400',
    fontFamily: 'Helvetica',
    textAlign: 'left',
  },
}))

我正在努力将它定位在 makestyles 中，我认为这一定是可能的，因为我不习惯它，所以我很难过。

Answer 1

我将以AccordionSummary 为例说明如何覆盖现有样式。 Accordion Summary 有 6 个可以被覆盖的 CSS 规则：root、expanded、focused、disabled、content 和 expandIcon。您可以在 Material UI 的官方文档中的CSS section of the AccordionSummary API page 看到这一点。这些中的每一个都对应于相应组件的 Material UI 类，例如AccordionSummary 的根对应于类 .MuiAccordionSummary-root。要覆盖这些样式，您可以通过overriding styles with classes 进行。

使用您的示例：

1. 创建类名并在makeStyles 中添加样式。我将创建一个名为 summaryExpanded 的模型，并将包含样式 minHeight: '64px'。

const useStyles = makeStyles((theme) => ({
  root: {
    borderBottom: '0.5px solid',
    borderBottomColor: theme.palette.primary.main,
    marginBottom: '16px',
    maxHeight: '35px',
  },
  summary: {
    backgroundColor: theme.palette.complimentory.main,
    borderBottom: '0.5px solid',
    borderBottomColor: theme.palette.primary.main,
    maxHeight: '35px',
    height: '35px',
  },
  summaryExpanded: {
    minHeight: '64px',
  },
  title: {
    fontFamily: 'Helvetica',
    fontStyle: 'normal',
    fontWeight: 'normal',
    fontSize: '14px',
    lineHeight: '14px',
    letterSpacing: '0.266667px',
    textTransform: 'uppercase',
  },
  content: {
    marginTop: '15px',
    fontSize: '14px',
    fontStyle: 'normal',
    lineHeight: '16.8px',
    letterSpacing: '0.375px',
    fontWeight: '400',
    fontFamily: 'Helvetica',
    textAlign: 'left',
  },
}))

1. 通过访问相关的规则名称并分配您的自定义类来覆盖AccordionSummary 组件中的样式。在本例中，它是 expanded，因为我们希望在 AccordionSummary 组件中覆盖 .Mui-expanded。

const classes = useStyles();

<Accordion>
  <AccordionSummary
    classes: {{
      expanded: classes.summaryExpanded,
    }}
  >
  </AccordionSummary>
  <AccordionDetail>
  </AccordionDetail>
</Accordion>

Answer 2

您应该在项目的根目录中使用<StyledEngineProvider injectFirst>

import { render } from "react-dom";
import { StyledEngineProvider } from "@mui/material";
import App from "./App";

const rootElement = document.getElementById("root");
render(
  <StyledEngineProvider injectFirst>
    <App />{" "}
  </StyledEngineProvider>,
  rootElement
);

import * as React from "react";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import IconButton from "@mui/material/IconButton";
import MenuIcon from "@mui/icons-material/Menu";
import makeStyles from "@mui/styles/makeStyles";

const useStyles = makeStyles((theme) => {
  return {
    root: {
      backgroundColor: "red",
      color: "pink"
    }
  };
});

export default function App() {
  const classes = useStyles();
  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static" className={classes.root}>
        <Toolbar>
          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="menu"
            sx={{ mr: 2 }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            News
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </Box>
  );
}

工作演示在这里https://codesandbox.io/s/wizardly-stonebraker-qnh3t

Answer 3

你可以做这样的事情 - 玩弄覆盖属性。

import { Overrides } from "@material-ui/core/styles/overrides";

const overrides: Overrides = {
  MuiExpansionPanelSummary: {
    root: {
      minHeight: "3.25rem",
      "&$expanded": {
        minHeight: "3.25rem",
      },
    },
    content: {
      margin: "0.25rem",
      "&$expanded": {
        margin: "0.25rem",
      },
    },
    expandIcon: {
      padding: "0.5rem",
    },
    expanded: {},
  },
};