Material UI 工具提示不适用于 react-select 选项

Question

我想要 tooltip react-select's 选项。我已经看到 @atlaskit/tooltip 完全像这样工作，但我想使用 material ui 工具提示，但在我尝试时它不起作用。谁能帮我解决一下

import React, { Component } from "react";
import Select, { components } from "react-select";
import {primaryColor,primaryColorLight} from "../app-resources/theme-overrides/global"
import Tooltip from '@material-ui/core/Tooltip';

const { Option } = components;

const customOption = props => {
  return (
        <Tooltip title={props.label} arrow>
          <Option {...props} />
        </Tooltip>
  );
};

export default class SingleSelect extends Component {
  render(props) {
    return (
      <>
      <Select
        components={{
          Option: customOption,
          }}
        className="basic-single"
        classNamePrefix="select"
        name={this.props.name}
        isClearable
        options={this.props.Options}
        placeholder={this.props.placeholder}
        styles={{
          menu: base => ({
            ...base,
            marginTop: 0
          }),
          control: (base, state) => ({
            // none of react-select's styles are passed to <Control />
            background: 'white',
            height: 45,
            border: "1px solid #ccc2c2",
            borderRadius: 25,
            display: 'flex', 
            border: state.isFocused ? "2px solid "+primaryColor : "1px solid #ccc2c2", //${primaryColor}
            // This line disable the blue border
            boxShadow: state.isFocused ? 0 : 0,
            '&:hover': {
               border:  state.isFocused ?"2px solid "+primaryColor:"1px solid "+primaryColorLight
            },
            fontSize: '1rem'
           }),
          container: (provided, state) => ({
            ...provided,
            marginTop: 8
          }),
          valueContainer: (provided, state) => ({
            ...provided,
            overflow: "visible"
          }),
          placeholder: (provided, state) => ({
            ...provided,
            position: "relative",
            display: "block",
            top: state.hasValue || state.selectProps.inputValue ? -4 : "47%",
            transition: "top 0.1s, font-size 0.1s",
            fontSize: state.hasValue || state.selectProps.inputValue? 12 : "1rem",
            color: state.hasValue || state.selectProps.inputValue || state.isFocused?primaryColor:"#757575",
            marginBottom: 20,
            background: 'linear-gradient(to top,#ffffff 60%,#fff0 50%)',
            backgroundSize: "60% auto",
            fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
            padding:"0px 5px",
            marginLeft: 0,
            borderTopRightRadius: 20,
            borderTopLeftRadius: 20
          })
        }}
      />
      </>
    );
  }
}

Answer 1

这是我的工作代码和框：https://codesandbox.io/s/strange-shape-kthxv?file=/src/App.js。

基本上我们使用以下列表作为选项（例如）。这里的关键是使用 Tooltip 来包装标签。

const options = [
  {
    value: "chocolate",
    label: (
      <Tooltip placement="right" title="chocolate" arrow>
        <span>Chocolate</span>
      </Tooltip>
    )
  },
  {
    value: "strawberry",
    label: (
      <Tooltip placement="right" title="strawberry" arrow>
        <span>Strawberry</span>
      </Tooltip>
    )
  },
  {
    value: "vanilla",
    label: (
      <Tooltip placement="right" title="Vanilla" arrow>
        <span>Vanilla</span>
      </Tooltip>
    )
  }
];

希望对您有所帮助。

Material UI 工具提示不适用于 react-select 选项

Material UI Tooltip not working with react-select options

tooltip

reactjs

react-select

material-ui