css - چگونه عرض Tooltip در Ant design را تغییر دهیم

من میخواهم عرض راهنمای ابزار را تغییر دهم، اما نمیتوانم.
چگونه این کار را انجام دهم؟

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;

استایلهای درون خطی کار نمیکنند.
هیچ استایلی اصلاً کار نمیکند

پاسخ شماره ۱

میتوانید این کار را بدون کلاس CSS به این صورت انجام دهید:

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

پاسخ شماره ۲

میتوان Tooltip در antd را با بازنویسی مقادیر در کلاس CSS .ant-tooltip-inner تطبیق داد.

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

در اینجا یک CodeSandBox کار میکند، به فایل index.css برای تغییرات نگاه کنید.