如何改变 Ant 设计 Tooltip 的宽度

Question

我想更改工具提示的宽度，但我不能。
我该怎么做呢？

import React, { FunctionComponent } from 'react';
import {Tooltip} from "antd";
import 'antd/dist/antd.css';

export interface Props {
  tooltipeText: string
}

const hintWithTooltipeStyle = {
  position: 'relative' as 'relative',
  left: 5,
  top: 1
};


const HintWithTooltipe: FunctionComponent<Props> = ({
  tooltipeText
}: Props) => {
  return (
    <span style={hintWithTooltipeStyle}>
      <Tooltip placement="rightTop" title={tooltipeText} style={{width: 700, maxWidth: '500px !important'}}>
        <Button>Ant design</Button>
      </Tooltip>
    </span>
  );
};

export default HintWithTooltipe;

内联样式不起作用。
根本没有任何风格

Answer 1

你可以在没有 css 类的情况下这样做：

<Tooltip placement="rightTop" title={tooltipeText} overlayStyle={{maxWidth: '500px'}}>
     <Button>Ant design</Button>
</Tooltip>

Answer 2

所述antd工具提示可以通过在CSS类中重写的值被适配.ant-tooltip-inner。

.ant-tooltip-inner {
  color: yellow;
  background-color: green;
  width: 200px;
}

这是一个有效的CodeSandBox看看index.css文件的变化。