preface

While working on a recent project with Ant Design of Vue’s component library, I found that some components had different styles than the product requirements. At this point, we need to override the third party style. I looked up some information and found that my previous approach to locating the style of third-party components was not correct, so I came up with this article.

demand

The requirement in the project is to implement a google-like component. This component has multiple drop-down lists, as well as a refresh button. Fortunately, ANTD Vue provides an A-input-Group component that allows the components of input, SELECT, and Button to be freely combined to form a new component.

A prototype

After some combination, the prototype of the component has been. But the component’s default bezel and blue glow when clicked make the whole thing look ugly. These default component styles need to be removed.

Style Coverage techniques

Target style positioning

Style cover

Wrap the outermost part of the component with a class wrapper name to narrow down style coverage and avoid fouling the global style.

/* Remove default border */
.wrapper .ant-btn..wrapper .ant-select-selection..wrapper .ant-select-auto-complete.ant-select .ant-input {
  border: none;
}

/* Click the halo button to remove */
button[ant-click-animating-without-extra-node]:after {
  border: 0 none;
  opacity: 0;
  animation: none 0 ease 0 1 normal;
}
Copy the code

The effect

The demo address

antd input-group style test