编辑按钮工具提示颜色Prime React

Question

我正在尝试更改工具提示的背景颜色，我使用的是主反应按钮（https://primefaces.org/primereact/showcase/#/tooltip）。

Tooltip image

我的代码：

<DebtorClientColumn>
   <Tooltip tooltip="Mensagem do tooltip" tooltipOptions={{ position: "bottom" }}>
      <DebtorIcon
        data-testid={`debtor-icon-${client._id}`}
       />
   </Tooltip>

我尝试设置DebtorClientColumn和Tooltip的样式，但是两者都不起作用：

const Tooltip = styled(Button)`
    .p-tooltip{
        background-color: ${Colors.white} !important;
        color:  ${Colors.white} !important;
    }   

    .p-tooltip-arrow     {
        background-color: ${Colors.white} !important;
        color:  ${Colors.white} !important;

    }

    .p-tooltip-text      {
        background-color: ${Colors.white} !important;
        color: ${Colors.strawberry} !important;

    }
`

const DebtorClientColumn = styled.div`
    display: flex;
    flex-direction: row;

    .p-button, .p-button:enabled:active, .p-button:enabled:hover{
        background-color: ${Colors.white};
        border: none;
        font-size: 0px
    };

    .p-button:enabled:focus {
        box-shadow: none
    };

    .p-tooltip{
        background-color: ${Colors.white} !important;
    }   

    .p-tooltip-arrow     {
        background-color: ${Colors.white} !important;
    }

    .p-tooltip-text      {
        background-color: ${Colors.white} !important;
        color: ${Colors.strawberry} !important;
    }
`

Answer 1

使用tooltipOptions并提供一个自定义类。

Working demo (hoverover on the button)