typescript 如何更改Ant设计工具提示宽度

i2byvkas  于 2023-01-31  发布在  TypeScript
关注(0)|答案(4)|浏览(154)

我想更改工具提示的宽度,但无法更改。
我该怎么做呢?

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;

内联样式不起作用。
所有样式均无效

aemubtdh

aemubtdh1#

你可以这样做,没有css类:

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

rxztt3cl2#

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

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

这是一个工作的CodeSandBox,请查看index.css文件中的更改。

hpcdzsge

hpcdzsge3#

或者您可以从Tooltip访问overlayInnerStyle属性。

<Tooltip overlayInnerStyle={{width: '250px'}} title={`tootltip text`}>
  Info Text
</Tooltip>
hmae6n7t

hmae6n7t4#

应使用min-width更改内部边框

overlayStyle={{ maxWidth: '260px' }}

相关问题