Solve the problem of front-end UI library style penetration

Article directory

---

foreword

With the rise of front-end frameworks, programmers know how to use tools more and more, and various front-end UI component libraries emerge as the times require, which greatly reduces the time programmers need to spend on making pages and focuses more on business logic. Development, but it is convenient to customize the component library, but in this way, everyone will open the same components, and the highly customized website design is much less. Therefore, in order to solve this problem, beginners need to modify the styles in the components. It is very necessary! !

---

Table of contents

Article directory

foreword

1. What is style penetration?

2. Use steps

1. Import library (take Ant design VueUI library as an example)

2. Using components

3. Modification method

1. Only some single-page components need to be modified, under scoped

         2. Global introduction

Summarize

---

1. What is style penetration?

Style penetration, that is, to modify the style of packaged components, the purpose is to make the UI component library launched by Internet companies perfectly adapt to their own products, and develop a highly self-made page design.

2. Use steps

1. Import library (take Ant design VueUI library as an example)

The code is as follows (example):

The cmd command enters the project root directory:

yarn add antd

//main.ts

import { createApp } from "vue";

import { Switch } from "ant-design-vue";

import 'ant-design-vue/dist/antd.less';

import App from "./App.vue";

import "./registerServiceWorker";

import router from "./router";

import store from "./store";

2. Using components

The code is as follows (example):

 <a-switch v-model:checked="deliveryAI" />

Page effect without style penetration: (very abrupt)

Modify the style (in the global modification mode: adjust the style under the App.vue file.)

.ant-switch-checked {
  background-color: #6c5321;
}

Page effect after style penetration: (It feels so good to integrate with the picture drawn by Miss UI!)

3. Modification method

1. Only some single-page components need to be modified, under scoped

There are three ways to write style penetration: >>>, /deep/,::v-deep

注意：Depth effect selector  >>> (only for css)

But if it is sass/less, it may not be recognized. In this case, you need to use the /deep/ selector.

2. Global introduction

That is, write styles in App.vue or other external css that do not include scoped style tags. This way of writing will affect all components of this type used in the entire project, so use with caution.

Summarize

The above is the content of style penetration to be talked about today. This article only briefly introduces the background and basic use of style penetration. The component library is convenient for development, but at the same time, there are many programmers who like to delve into highly customized page design. Although the components are good, they can’t be used for multiple purposes. If you learn the front-end three-piece set well, you won’t be afraid to go anywhere.