vue或react中修改组件样式的方法
- 从组件库中引入的组件
- 深度选择器:deep和:global
- 深度选择器在scss中的使用
- 关键点
- 常规的组件样式修改
- 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;