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

问题描述

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

我的代码：

<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;
    }
`

标签： javascriptreactjstooltipprimereact

使用tooltipOptions并提供自定义类。

工作演示（将鼠标悬停在按钮上）

JSX

       <Button
          tooltipOptions={{
            className: "hoverClass",
            showDelay: 500,
            hideDelay: 101300
          }}
          type="button"
          label="Save"
          icon="pi pi-check"
          tooltip="Click to proceed"
        />

CSS

.hoverClass .p-tooltip-text {
  background-color: red !important;
}

编辑：

工具提示是portals，它们是一个单独的渲染树。样式化组件的类的范围仅限于已样式化的元素。您可以定位样式元素和其中的元素，但是对于门户，您不能应用类。请参阅此处的 github 问题。

因此，在您的情况下，对于样式工具提示，请使用此答案中提到的常规 css。

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

问题描述

解决方案

推荐阅读