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 和内联 CSS 样式表：在组件模板中使用 className 属性来设置类名，然后在组件内部定义对应的样式。

import React from 'react';

function MyComponent(props) {
    
    
  const styles = {
    
     color: props.color, fontSize: props.fontSize + 'px' };
  return (
    <div className="my-component" style={
    
    styles}>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;

---