vue或react中修改组件样式的方法

简介: vue或react中修改组件样式的方法

vue或react中修改组件样式的方法

从组件库中引入的组件

深度选择器:deep和:global

在 Vue 和 SCSS 中,:deep:global 是用于控制样式作用范围的关键词。⭐⭐⭐在 Vue 中,:deep 用于深度作用选择器,可以让样式穿透到子组件中。而 :global 则用于全局作用选择器,可以使样式不受组件的限制。

例,在一个父组件中使用了一个子组件,并且需要修改子组件内部某个元素的样式:

<template>
  <div class="parent">
    <MyComponent></MyComponent>
  </div>
</template>
<style scoped>
.parent /deep/ .child {
  color: red;
}
</style>

在上面的例子中,通过 /deep/ 关键词让 .child 样式穿透到了子组件中。如果不加 /deep/ 的话,.child 样式只会对父组件生效,不会影响到子组件。

⭐⭐⭐而如果要定义一个全局样式,在 Vue 中可以使用 :global() 包裹样式内容来实现:

<template>
  <div class="parent">
    <MyComponent></MyComponent>
  </div>
</template>
<style scoped>
.parent {
  :global(.my-global-style) {
    color: red;
  }
}
</style>

这里将 .my-global-style 样式设置为全局样式,并通过 :global() 包裹起来使其可以应用到整个项目中。


深度选择器在scss中的使用

⭐在 SCSS 中,同样可以使用 :global 关键词来定义全局样式,例:

:global(.my-global-style) {
  color: red;
}

这样就可以在整个 SCSS 文件中使用 .my-global-style 样式了。同时,:deep 在 SCSS 中也有类似的用法,例:

.parent {
  &:deep(.child) {
    color: red;
  }
}

这里通过 &:deep().child 样式穿透到了父组件中。注意,在使用 :deep 的时候需要确保选择器是合法的,否则编译会报错。


关键点在使用 :deep 和 :global 时,需要注意以下几点:


1.在 Vue 中,:deep 只有在样式作用域为 scoped 的情况下才会生效,否则可以直接使用普通的选择器。


2.在 SCSS 中,:global 关键词只能用于单个选择器的定义中,并且不能与其他选择器组合使用。例如,:global(.my-global-style) 是合法的写法,但是div:global(.my-global-style) 就是不合法的。


3.使用 :deep 和 :global 可能会导致样式污染和命名空间冲突问题。因此,在使用这些关键词时需要确保命名规范清晰、避免重复等问题。


4.需要慎重使用全局样式,因为全局样式可能会影响到整个项目中的元素,甚至可能会与其他组件产生冲突。如果必须要使用全局样式,请尽量将其定义在专门的全局样式文件中,并通过特定的命名约定来避免命名冲突。


5.在使用 :deep 和 :global 时需要注意浏览器兼容性问题。目前大多数现代浏览器都支持这些关键词,但是一些老旧版本的浏览器可能无法正确解析它们。


6.权重问题,因为这种选择器的使用,具有穿透性,即使是引入的组件,通过f12找到元素类名,可以通过这样的方式修改其样式,但要注意,这边修改一个样式,其他地方有的样式也可能会变,这就一定要选择class的唯一值。否则,多个元素共用一个class名,那么一改全变!

常规的组件样式修改

vue中的样式修改

⭐⭐使用内联样式:在组件模板中使用 style 属性来设置样式。

<template>
  <div :style="{ color: textColor, fontSize: textSize + 'px' }">Hello World</div>
</template>
<script>
export default {
  data() {
    return {
      textColor: 'red',
      textSize: 20
    }
  }
}
</script>

⭐⭐使用 class 属性和全局 CSS 样式表:在组件模板中使用 class 属性来设置类名,然后在全局 CSS 样式表中定义对应的样式

<template>
  <div class="my-component">Hello World</div>
</template>
<style scoped>
.my-component {
  color: red;
  font-size: 20px;
}
</style>

⭐⭐使用 class 属性和局部 CSS 样式表:在组件模板中使用 class 属性来设置类名,然后在组件内部定义对应的样式。

<template>
  <div class="my-component">Hello World</div>
</template>
<style lang="scss">
.my-component {
  color: red;
  font-size: 20px;
}
</style>

⭐⭐使用动态绑定的 class 和 style:通过计算属性或方法返回需要设置的类名和样式对象,并将它们与 class 和 style 绑定起来。这种方式更加灵活,可以根据组件的状态动态改变样式。

<template>
  <div :class="myClass" :style="myStyle">Hello World</div>
</template>
<script>
export default {
  data() {
    return {
      isActive: true
    }
  },
  computed: {
    myClass() {
      return this.isActive ? 'active' : ''
    },
    myStyle() {
      return { color: this.textColor, fontSize: this.textSize + 'px' }
    }
  }
}
</script>

react中的样式修改

⭐⭐使用内联样式:在组件模板中使用 style 属性来设置样式对象。

import React from 'react';
function MyComponent(props) {
  const styles = { color: props.color, fontSize: props.fontSize + 'px' };
  return (
    <div style={styles}>Hello World</div>
  );
}
export default MyComponent;

⭐⭐使用 className 和全局 CSS 样式表:在组件模板中使用 className 属性来设置类名,然后在全局 CSS 样式表中定义对应的样式。

import React from 'react';
import './MyComponent.css';
function MyComponent(props) {
  return (
    <div className="my-component">Hello World</div>
  );
}
export default MyComponent;

⭐⭐使用动态绑定的 className 和 style:通过计算属性或方法返回需要设置的类名和样式对象,并将它们与 className 和 style 绑定起来。这种方式更加灵活,可以根据组件的状态动态改变样式。

import React from 'react';
function MyComponent(props) {
  const styles = { color: props.textColor, fontSize: props.textSize + 'px' };
  const classNames = ['my-component', props.isActive ? 'active' : ''].join(' ');
  return (
    <div className={classNames} style={styles}>Hello World</div>
  );
}
export default MyComponent;
相关文章
|
15天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
134 2
|
4月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
570 0
|
6月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
770 4
|
4月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
3月前
|
JavaScript 前端开发 API
对比Vue框架与React库的主要区别
在选择Vue还是React时,考虑项目的需求、团队的熟悉程度和个人偏好至关重要。如果项目需要快速原型开发和较小的学习曲线,Vue可能是更好的选择。相反,如果项目需要更大的灵活性,或者项目团队已经有React的经验,那么React可能是更合适的选择。
172 13
|
5月前
|
前端开发 JavaScript 安全
除了高阶组件和render props,还有哪些在 React 中实现代码复用的方法?
除了高阶组件和render props,还有哪些在 React 中实现代码复用的方法?
221 62
|
6月前
|
移动开发 前端开发 JavaScript
Vue与React两大前端框架的主要差异点
以上就是Vue和React的主要差异点,希望对你有所帮助。在选择使用哪一个框架时,需要根据项目的具体需求和团队的技术栈来决定。
369 83
|
4月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件的实现代码:支持自定义表情库、快捷键发送和输入框联动的聊天表情解决方案
本文详细介绍了在 Vue 项目中实现一个功能完善、交互友好的表情包输入组件的方法,并提供了具体的应用实例。组件设计包含表情分类展示、响应式布局、与输入框的交互及样式定制等功能。通过核心技术实现,如将表情插入输入框光标位置和点击外部关闭选择器,确保用户体验流畅。同时探讨了性能优化策略,如懒加载和虚拟滚动,以及扩展性方案,如自定义主题和国际化支持。最终,展示了如何在聊天界面中集成该组件,为用户提供丰富的表情输入体验。
326 8
|
4月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
213 1
|
4月前
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入,动态渲染进度段,支持动画效果和内容展示。当进度超出总长时,超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤(包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示),并提供了使用示例。通过此组件,开发者可根据项目需求灵活展示进度情况,优化用户体验。资源地址:[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
140 0