css - 如何改变 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

antd Tooltip可以通过覆盖 css 类中的值进行调整 .ant-tooltip-inner .

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

这是一个工作 CodeSandBox看看 index.css更改文件。