element-plus el-date-picker修改样式

要修改 element-plus 的 el-date-picker 样式，可以使用以下两种方法：

使用全局样式覆盖默认样式

在全局样式中添加以下代码，即可修改 el-date-picker 的样式：
/* 修改日期选择器的宽度 */
.el-date-picker {
width: 200px;
}

/* 修改日期选择器中的日期单元格的背景色 */
.el-date-table td.available:hover,
.el-date-table td.current {
background-color: #f0f0f0;
}
登录后复制

使用自定义主题

element-plus 提供了自定义主题的功能，可以通过修改主题变量来改变组件的样式。具体步骤如下：

在项目中创建一个 element-variables.scss 文件，并在其中定义需要修改的主题变量，例如：

$--color-primary: #409EFF;
$--border-radius-base: 4px;
登录后复制

在 main.js 中引入 element-variables.scss 文件，并使用 ElThemeProvider 组件将应用包裹起来，例如：

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import './element-variables.scss';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');
登录后复制

在组件中使用自定义主题，例如：

<template>
<el-date-picker v-model="date" :picker-options="pickerOptions"></el-date-picker>
</template>

<script>
export default {
data() {
return {
date: '',
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}]
}
};
}
};</script>

<style scoped>
/* 修改日期选择器的宽度 */
.el-date-picker {
width: 200px;
}

/* 修改日期选择器中的日期单元格的背景色 */
.el-date-table td.available:hover,
.el-date-table td.current {
background-color: #f0f0f0;
}
</style>
登录后复制