Javascript 如何重新定义样式；“反应歪斜”；

我想在我的项目中使用。 如何覆盖样式。提示工具提示？

---

我需要删除工具提示中的填充。

这是我使用react tippy和样式化组件创建的工具提示组件。您可以从中了解如何根据自己的需要进行定制：

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;

---

我能够自己解决这个问题，没有任何额外的动作。在全局样式文件中，我创建了class.tippy工具提示并将其设置为“padding:0！important”。

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