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

axzmvihb 于 2023-06-22 发布在 React

关注(0)|答案(2)|浏览(92)

我试图改变工具提示的背景颜色，我使用的是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;
    }
`

reactjs

来源：https://stackoverflow.com/questions/62283764/edit-button-tooltip-color-prime-react

2条答案

按热度按时间

v7pvogib1#

您可以使用样式化组件连接Icon
在这里，您可以看到应该呈现工具提示的列或主要组件

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>

赞(0）回复(0）举报 2023-06-22

ngynwnxp2#

使用tooltipOptions并提供一个自定义类。
Working demo (hoverover on the button)

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 issue here。
所以在你的例子中，使用常规的css来设计工具提示，就像在这个答案中提到的那样。

赞(0）回复(0）举报 2023-06-22

我来回答

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

2条答案

相关问题

热门标签

最新问答