Как переопределить CSS-класс с помощью Styled-Components

Question

Я хочу переопределить ant-tooltip-inner класс CSS, используя Styled-Components .

При обычном import './Tooltip.css' все работает как положено.

// import './Tooltip.css';            // Overrides
const StyledLayout = styled.div` 

  // Doesn't Work     
  &.ant-tooltip-inner {
    background-color: palevioletred !important;
    color: white !important;
  }

  // Works on other CSS class
  // default is light-blue - check Sidebar menu item in sandbox 
  .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
    background-color: purple;
  }
`;

function CoolTooltip() {
  return (
    <StyledLayout>
      ...
    </StyledLayout>
  );
}

Моя цель - переопределить все цвета подсказок в моем проекте (ant-tooltip-inner).

В этой песочнице все стили (из Sidebar и Tooltip) должны быть стилизованы, раскомментирование import "./tooltip.css"; будет работать.

Answer 1

Я уже пытаюсь переопределить css Modal из antd, используя styled-components, но все равно не работает, как сказал Kushalvm выше. Я могу переопределить, используя чистый CSS со свойством className из Modal.

См. API свойств antd Modal здесь -> https://ant.design/components/modal/

Answer 2

Всплывающие подсказки, модальные или аналогичные компоненты визуализируются вне вашего SPA для улучшения производительности рендеринга дерева компонентов.

Скриншот для того же.

В вашем случае вы пытаетесь стилизовать отдельный экземпляр компонента, который НЕ будет работать через локальное моделирование. Для этого вы можете обратиться к документам antd или переопределить их глобально (файл css или любой другой способ, как говорят документы).