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

Question

我正在尝试更改工具提示的背景颜色，我正在使用主要反应按钮（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;
    }
`

Answer 1

使用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。

Answer 2

您可以使用样式组件加入图标

在这里，您可以看到应该呈现工具提示的列或主要组件

const Container = styled.div`
    display: flex;
    flex-direction: row;
    justify-content: center;

    &:hover ${Tooltip} {
        display: inline;
        text-align:center
    }
  `

这里是工具提示组件：

const Tooltip = styled.div`
    display: none;
    position: absolute;
    margin-top: 28px;
    border-radius: 4px;
    box-shadow: 0 1px 15px 0 black;
    background-color: ${Colors.white};
    padding: 6px;
`;

您应该使用以下方法处理组件：

 <Container>
  <Tooltip />
</Container>