CODEWITHSUNDEEP
reactjsstyled-components
Dennis Vash
Dennis Vash

Reputation: 53874

How to override CSS class with Styled-Components

I want to override ant-tooltip-inner css class using Styled-Components.

Using normal import './Tooltip.css' everything works as intended.

// 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>
  );
}

My goal is to override all tooltips coloring in my project (ant-tooltip-inner).

In this sandbox, all tooltips (of the Sidebar and Tooltip) need to be styled, uncommenting import "./tooltip.css"; will work.

Edit Override CssClass

Upvotes: 1

Views: 5429

Answers (2)

wafaulh
wafaulh

Reputation: 9

I already trying to override css of Modal from antd using styled-components, but still doesn't work as Kushalvm said above. I can override using pure CSS with className property from Modal.

See property API of antd Modal here --> https://ant.design/components/modal/

Upvotes: 0

HalfWebDev
HalfWebDev

Reputation: 7638

Tooltips, Modal or similar components are rendered outside your SPA to improve the render performance of component tree.

Screenshot for same. enter image description here

In your case you're trying to style a single instance of a component which will NOT work via local styling. You may refer to antd docs to do so or you may override it globally ( css file or any other way as docs say).

Upvotes: 2

Related Questions