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

Question

我正在与 material-ui tooltip 合作，只想更改 tooltipPlacementTop class:

的一种样式（边距）

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

但是这样它会覆盖此 class 默认情况下的所有样式。我怎样才能保留默认的 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>

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

Override some material-ui class styles but preserve the default ones

css

overriding

reactjs

material-ui