vue3 프로젝트에서 스타일 침투를 사용하여 elementUI 기본 스타일을 수정하는 방법

1. 스타일 모듈화

단일 CSS 파일에서는 스타일 태그에 구성 요소의 스타일을 작성합니다. 일반적으로 스타일 태그에는 범위가 지정된 속성이 있으므로 다양한 구성 요소의 선택기가 동일할 수 있습니다. , 그러나 스타일은 서로 간섭하지 마십시오.

예를 살펴보겠습니다. 두 구성 요소 모두에서 hello-world-box 클래스를 정의하고 해당 범위 태그에 서로 다른 스타일을 설정합니다. hello-world-box类，在对应的scope标签中设置不同的样式。

可以看到，vue为我们在不同的组件中的标签上加上了一个独有的属性（PostCSS转译实现）。然后通过属性选择器，实现不同属性的标签样式互不干扰。

css属性选择器的作用是：为带有特定属性的 HTML 元素设置样式

.hello-world-box[data-v-e17ea971] {
    color: red;
}

这也是style标签scoped属性实现样式模块化的原理。
当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。

二、样式穿透实现

了解了vue中样式模块化的实现，进入正题，如何实现自定义elmentUI组件库中组件的样式呢？
这其实也是比较常见的需求，因为有的UI图并不是使用element组件库的组件画的，所以样式上肯定存在偏差。
我们来看看el-table

可以看到，element组件的样式都是通过外部样式文件实现的，所以对应的标签上并没有vue加上的属性。
那么我们直接在使用elment组件的组件中加上样式，是不会生效的，外部导入的样式文件优先级更高。

1、外部css文件

我们可以自己定义一个css文件，然后书写对应的要修改的样式。
例如：styles.css

在入口文件main.js中引入:

这里注意引入elment css文件和自定义css文件的引入顺序，因为css样式生效是后来者居上的。

生效了。
但是这样其实是存在问题的： 样式文件影响了所有组件，也就是我们在其他页面中调用这个组件，样式也被修改了。
解决办法之一就是在组件对应的类上在包上一层自定义的类名。

2、:deep()

:deep()：改变css解析时私有属性的位置

.outer {
  .el-input__inner {
    // 此时css解析的为 .outer .el-input__inner[data-v-xxxx] 样式无效
    background: pink;
  }

  :deep(.el-input__inner) {
    // 此时css解析的为 .outer[data-v-xxxx] .el-input__inner 样式生效
    background: red;
  }
}

3、:slotted()

:slotted()：在子组件定义样式插槽内容样式

默认情况下，作用域样式不会影响到 <slot></slot> 渲染出来的内容，因为它们被认为是父组件所持有并传递进来的。

<template>
  <div>
    <slot>插槽</slot>
  </div>
</template>

<style lang="less" scoped>
:slotted(.red) {
  color: red;
}
</style>

4、:global()

:global() ：全局选择器，定义全局样式，不用单开一个没有scoped的style。

<style scoped>
:global(.red-box) {
	color: red;
}
</style>
<!-- 等效于 -->
<style>
 .red-box{
     color:red
 }
</style>

5、动态css（v-bind）

vue3单文件组件的 <style></style> 标签支持使用 v-bind CSS 函数将 CSS 的值链接到动态的组件状态，也就是我们可以在style标签中引入script标签中的响应式变量：

<template>
    <el-table :data="tableData" >
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
    </el-table>
</template>

<script lang="ts" setup>
import { ref } from &#39;vue&#39;;

const tableData = [
    {
        date: &#39;2016-05-03&#39;,
        name: &#39;Tom&#39;,
        address: &#39;No. 189, Grove St, Los Angeles&#39;,
    },
    {
        date: &#39;2016-05-02&#39;,
        name: &#39;Tom&#39;,
        address: &#39;No. 189, Grove St, Los Angeles&#39;,
    },
    {
        date: &#39;2016-05-04&#39;,
        name: &#39;Tom&#39;,
        address: &#39;No. 189, Grove St, Los Angeles&#39;,
    },
    {
        date: &#39;2016-05-01&#39;,
        name: &#39;Tom&#39;,
        address: &#39;No. 189, Grove St, Los Angeles&#39;,
    },
]

const redColor = ref(&#39;red&#39;)

</script>

<style scoped>
.el-table {
    color: v-bind(redColor);
}
</style>

可以看到，即使在带scoped的style标签中，样式穿透也生效了。

实际的值会被编译成哈希化的 CSS 自定义属性，因此 CSS 本身仍然是静态的。自定义属性会通过内联样式的方式应用到组件的根元素

🎜 보시다시피 vue는 다양한 구성 요소의 레이블에 고유 속성(PostCSS 번역 구현)을 추가합니다. 그런 다음 속성 선택기를 통해 서로 다른 속성의 레이블 스타일이 서로 간섭하지 않습니다. 🎜

🎜CSS 속성 선택기의 기능은 특정 속성을 가진 HTML 요소의 스타일을 설정하는 것입니다.🎜

rrreee🎜이것은 스타일 태그의 범위 속성을 사용하는 스타일 모듈화의 원리이기도 합니다. 🎜스타일 태그에 범위가 지정된 속성이 있는 경우 해당 CSS 스타일은 현재 구성 요소에만 적용할 수 있습니다. 즉, 스타일은 현재 구성 요소 요소에만 적용할 수 있습니다. 이 속성을 통해 컴포넌트 간의 스타일이 서로 오염되는 것을 방지할 수 있습니다. 프로젝트의 모든 스타일 태그에 범위가 지정되면 스타일 모듈화를 구현하는 것과 같습니다. 🎜🎜2. 스타일 침투 구현 🎜🎜 이제 vue의 스타일 모듈화 구현을 이해했으니 이제 사용자 정의 elementUI 구성 요소 라이브러리에서 구성 요소의 스타일을 구현하는 방법에 대해 알아보겠습니다. 🎜일부 UI 다이어그램은 요소 구성 요소 라이브러리의 구성 요소를 사용하여 그려지지 않으므로 실제로는 비교적 일반적인 요구 사항이므로 스타일에 차이가 있을 수 있습니다. 🎜el-table을 살펴보겠습니다🎜🎜🎜🎜요소 컴포넌트의 스타일은 외부 스타일 파일을 통해 구현되므로 해당 태그에 vue가 추가한 속성이 없는 것을 볼 수 있습니다. 🎜그러면 요소 구성 요소를 사용하여 구성 요소에 스타일을 직접 추가하면 외부에서 가져온 스타일 파일의 우선 순위가 높아집니다. 🎜

1. 외부 CSS 파일

🎜CSS 파일을 직접 정의한 후 해당 스타일을 작성하여 수정할 수 있습니다. 🎜예: styles.css🎜🎜🎜🎜main.js 항목 파일에 도입됨:🎜🎜🎜🎜여기서는 CSS 스타일이 먼저 적용되므로 요소 CSS 파일과 사용자 정의 CSS 파일이 도입되는 순서에 주의하세요. 🎜🎜 🎜🎜 적용되었습니다. 🎜하지만 여기에는 실제로 문제가 있습니다. 스타일 파일은 모든 구성 요소에 영향을 미칩니다. 즉, 다른 페이지에서 이 구성 요소를 호출하면 스타일도 수정됩니다. 🎜해결책 중 하나는 구성 요소에 해당하는 클래스의 패키지 위에 사용자 정의 클래스 이름을 추가하는 것입니다. 🎜

2, :deep()

🎜:deep(): CSS 구문 분석 중 비공개 속성의 위치 변경 🎜rrreee

3, :slotted()

🎜:slotted(): 하위 구성 요소에서 스타일 슬롯 콘텐츠 스타일을 정의합니다. 🎜🎜기본적으로 범위 스타일은 <slot></slot>의 렌더링에 영향을 주지 않습니다. code> 콘텐츠는 상위 구성 요소에 의해 보유되고 전달되는 것으로 간주되기 때문입니다. 🎜rrreee

4, :global()

🎜:global(): 범위가 지정되지 않은 스타일을 열지 않고 전역 스타일을 정의하는 전역 선택기입니다. 🎜rrreee

5. 동적 CSS(v-bind)

🎜vue3 단일 파일 구성 요소의 <style></style> 태그는 v-bind CSS 기능 CSS 값을 동적 <code>구성 요소 상태에 연결합니다. 즉, 스타일 태그의 스크립트 태그에 반응형 변수를 도입할 수 있습니다: 🎜rrreee🎜🎜🎜범위가 지정된 경우에도 이를 볼 수 있습니다. 스타일 태그를 사용하면 침투 스타일도 적용됩니다. 🎜🎜실제 값은 해시된 CSS 사용자 정의 속성으로 컴파일되므로 CSS 자체는 정적으로 유지됩니다. 사용자 정의 속성은 인라인 스타일을 통해 구성 요소의 루트 요소에 적용되며 소스 값이 변경되면 그에 따라 업데이트됩니다. 🎜🎜

위 내용은 vue3 프로젝트에서 스타일 침투를 사용하여 elementUI 기본 스타일을 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!