更改ElementPlus默认样式的方法
需要注意的是,这里修改的样式是。仅修改当前组件下的样式。中下入以下代码即可生效。也可以定义公共的外部。
·
更改ElementPlus默认样式的方法
安装:
# 选择一个你喜欢的包管理器
# NPM
$ npm install element-plus --save
# Yarn
$ yarn add element-plus
# pnpm
$ pnpm install element-plus
使用:
// main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
更多详细内容移步官网
一、添加没有scoped的样式(页面中可以有多个)
需要注意的是,这里修改的样式是全局都生效的。
<style lang="scss">
.el-date-editor {
box-shadow: none !important;
}
</style>
<style lang="scss" scoped>
/* 其他css代码 */
</style>
也可以定义公共的外部css
,采用import
的方式在main.js
中引入即可。
import './assets/element.css';
/* element.css */
.el-date-editor {
box-shadow: none !important;
}
二、使用deep
仅修改当前组件下的样式。
<style lang='scss' scoped>
::v-deep .el-date-editor {
box-shadow: none !important;
}
</style>
三、修改部分主题色
这里修改的样式也是全局都生效的。
在APP.vue
中下入以下代码即可生效。
import { onMounted } from 'vue'
// 该示例为修改`el-date-picker`时间选择器的颜色主题所需修改的颜色
onMounted(() => {
document.body.style.setProperty('--el-text-color-primary', 'rgba(142, 193, 205, 1)');
document.body.style.setProperty('--el-text-color-regular', 'rgba(142, 193, 205, 1)');
document.body.style.setProperty('--el-fill-color-blank', 'transparent');
document.body.style.setProperty('--el-bg-color-overlay', 'rgba(9, 53, 57, 0.95)');
document.body.style.setProperty('--el-color-primary', 'rgba(24, 149, 142, 1)');
document.body.style.setProperty('--el-border-color-extra-light', 'rgba(24, 149, 142, 0.1)');
document.body.style.setProperty('--el-disabled-bg-color', 'rgba(24, 149, 142, 0.1)');
document.body.style.setProperty('--el-disabled-border-color', 'rgba(24, 149, 142, 0.1)');
document.body.style.setProperty('--el-border-color', 'rgba(12, 105, 115, 1)');
document.body.style.setProperty('--el-border-color-light', 'rgba(50, 205, 220, 1)');
document.body.style.setProperty('--el-border-color-lighter', 'rgba(12, 105, 115, 1)');
document.body.style.setProperty('--el-fill-color-light', 'rgba(15, 83, 95, 1)');
})
更多推荐
已为社区贡献10条内容
所有评论(0)