web-dev-qa-db-ja.com

Material-UIツールチップのスタイルを設定するには？

Material-UIツールチップテキストのスタイルを設定するにはどうすればよいですか？ホバー時のデフォルトのツールチップはテキストラップなしで黒くなります。背景や色などを変更することはできますか？このオプションは利用できますか？

reactjstooltipmaterial-uiformsy-material-ui
16
codinginnewyork

この質問に対する承認された回答は古くなっているようです（Material-UIのごく初期のバージョン用でした）。以下に、私の回答を Material UI's Tooltip-Customization Style からコピーしました

以下は、テーマを介してすべてのツールチップをオーバーライドする方法、またはwithStylesを使用して単一のツールチップをカスタマイズする方法の例です。 2番目の方法は、グローバルに使用することを強制せずに再利用できるカスタムツールチップコンポーネントを作成するためにも使用できます。

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

import {
  createMuiTheme,
  MuiThemeProvider,
  withStyles
} from "@material-ui/core/styles";
import Tooltip from "@material-ui/core/Tooltip";

const theme = createMuiTheme({
  overrides: {
    MuiTooltip: {
      tooltip: {
        fontSize: "2em",
        color: "yellow",
        backgroundColor: "red"
      }
    }
  }
});
const styles = {
  tooltip: {
    color: "lightblue",
    backgroundColor: "green"
  }
};

function App(props) {
  return (
    <div className="App">
      <MuiThemeProvider theme={theme}>
        <Tooltip title="This tooltip is customized via overrides in the theme">
          <div>Hover to see tooltip</div>
        </Tooltip>
      </MuiThemeProvider>
      <Tooltip
        classes={props.classes}
        title="This tooltip is customized via withStyles"
      >
        <div>Hover to see tooltip</div>
      </Tooltip>
    </div>
  );
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);

これが実際の例です：

Edit 3xx46v9015

ツールチップの動作のさまざまな側面を制御するために使用できるツールチップCSSクラスに関するドキュメントは次のとおりです。 https://material-ui.com/api/tooltip/#css

これらはテーマでこれらのクラスをオーバーライドすることに関するドキュメントです： https://material-ui.com/customization/themes/#css

6
Ryan Cogswell

この回答は古くなっています。この回答は2016年に書かれており、Material-UIはそれ以降大幅な変更が行われています。現在のバージョン（現時点では3.9.2）で動作するアプローチについては、 この回答 を参照してください。

まあ、あなたはテキストの色とmuiテーマをカスタマイズする要素の背景を変更することができます。

color-テキストの色です

rippleBackgroundColor-ツールチップの背景です

例：IconButtonを使用する-Tooltipを直接使用できます。

import React from 'react';
import IconButton from 'material-ui/IconButton';
import MuiThemeProvider from 'material-ui/lib/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/lib/styles/getMuiTheme';

const muiTheme = getMuiTheme({
  tooltip: {
    color: '#f1f1f1',
    rippleBackgroundColor: 'blue'
  },
});

const Example = () => (
  <div>
    <MuiThemeProvider muiTheme={muiTheme}>
        <IconButton iconClassName="muidocs-icon-custom-github" tooltip="test" />
    </MuiThemeProvider>
  </div>
);

styleのTooltipオブジェクトを渡すこともできます（IconButtonはtooltipStylesです）。ただし、これらのスタイルはルート要素にのみ適用されます。

ラベルスタイルを変更して複数行に折り返すことはまだできません。

10
André Junges