Блог

Главная - Вопросы по программированию - Как переопределить style .tippy-всплывающая подсказка в «react-tippy»

Как переопределить style .tippy-всплывающая подсказка в «react-tippy»

#javascript #reactjs

#javascript #reactjs

Вопрос:

Я хочу использовать «react-tippy» для своего проекта. Как я могу переопределить styles .tippy-tooltip? Мне нужно удалить отступы внутри всплывающей подсказки.

Комментарии:

1. Я смог решить проблему самостоятельно без каких-либо дополнительных жестов. В глобальном файле стиля я создал class .tippy-tooltip и установил для него значение «заполнение: 0 ! важно».

Ответ №1:

Вот компонент всплывающей подсказки, который я создал для своего использования, используя компоненты react tippy и styled. Оттуда вы можете понять, как настроить его в соответствии с вашими потребностями:

Tooltip.js

 import React from 'react';

import 'tippy.js/dist/tippy.css';
import { TooltipText, StyledTippy } from './Tooltip.styled';

const Tooltip = ({ moveDown, moveRight, content, ...props }) => (
  <StyledTippy
    moveDown={moveDown}
    moveRight={moveRight}
    content={
      <TooltipText small bold>
        {content}
      </TooltipText>
    }
    placement="bottom"
    {...props}
  >
    {props.children}
  </StyledTippy>
);

export default Tooltip;

Tooltip.styled.js

 import styled from 'styled-components';
import Tippy from '@tippyjs/react';

export const TooltipText = styled.p`
  font-weight: 500;
  font-size: 10px;
  line-height: 12px;
  color: ${({ theme }) => theme.colors.tooltips.simpleText};
`;

export const StyledTippy = styled(Tippy)`
  z-index: 5000;
  margin-top: ${({ moveDown }) => (moveDown ? `${moveDown}px` : '0')};
  margin-left: ${({ moveRight }) => (moveRight ? `${moveRight}px` : '0')};
  background: ${({ theme }) => theme.colors.tooltips.simpleBackground};
  height: 24px;
  width: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  .tippy-arrow {
    color: ${({ theme }) => theme.colors.tooltips.simpleBackground};
  }
`;