css - 覆盖一些material-ui类样式但保留默认样式

Question

我正在与 material-ui tooltip 合作并且只想更改 tooltipPlacementTop 类的一种样式(边距):

    const useStyles = makeStyles(theme => ({
      tooltipPlacementTop: {
         margin: '4px 0' 
      },
    });
    ....
    <Tooltip classes={{ tooltipPlacementTop: classes.tooltipPlacementTop }} >

但是这样它就会覆盖该类默认具有的所有样式。如何保留默认的 Material-ui 样式并仅更改我需要的样式？

---

我发现了这个问题，在我的例子中，Tooltip是一个使用material-ui工具提示的自定义组件，我实际上覆盖了其中的classes属性...

结束问题

Answer 1

在material ui api 文档中，您可以随时查看implementation of the component 。如果我理解正确的话，您想要覆盖 tooltipPlacementTop 的边距，但想要保留其余的样式。如果您以这种方式添加样式，它们将扩展现有样式而不是覆盖它们。您可能忽略了 theme.breakpoint。

看看这个

import React from "react";
import "./styles.css";
import Tooltip from "@material-ui/core/Tooltip";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  tooltipPlacementTop: {
    margin: "4px 0",
    [theme.breakpoints.up("sm")]: {
      margin: "4px 0"
    }
  }
}));

function App() {
  const classes = useStyles();
  return (
    <div className="App" style={{ marginTop: 100 }}>
      <Tooltip title="hi there" classes={classes} placement="top">
        <h2>Hover me!</h2>
      </Tooltip>
    </div>
  );
}

const { Tooltip, makeStyles } = MaterialUI;

const useStyles = makeStyles((theme) => ({
  tooltipPlacementTop: {
    margin: "4px 0",
    [theme.breakpoints.up("sm")]: {
      margin: "4px 0"
    }
  }
}));

function App() {
  const classes = useStyles();
  return (
    <div className="App" style={{ marginTop: 50 }}>
      <Tooltip title="hi there" classes={classes} placement="top">
        <h2 style={{ textAlign: 'center' }}>Hover me!</h2>
      </Tooltip>
      <Tooltip title="hi there (normal)" placement="top">
        <h2 style={{ textAlign: 'center', marginTop: 50 }}>Hover me (default)!</h2>
      </Tooltip>
    </div>
  );
}

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

<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js" crossorigin></script>

<div id="root"></div>