style element-plus component in vue 3

Question

I need help with styling component el-date-picker from element plus, can't figure it out.

Code for a text input from component:

<label v-if="label" class="form-label" :for="id">{{ label }}:</label>
<input :id="id" ref="input" v-bind="{ ...$attrs, class: null }" class="form-input" :class="{ error: error }" :type="type" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
<div v-if="error" class="form-error">{{ error }}</div>

Text input component call:

<text-input v-model="form.sender.text" :error="form.errors.sender" class="pb-8 pr-6 w-full lg:w-1/3" label="Nadpis" :disabled="true" />

gives this (whitch is correct:

but, code for element-plus datetime picker from component:

<label v-if="label" class="form-label" :for="id">{{ label }}:</label>
<el-date-picker :id="id" ref="input" v-model="selected" v-bind="{ ...$attrs, class: null }" class="form-input" :class="{ error: error }" type="datetime" />
<div v-if="error" class="form-error">{{ error }}</div>

Element-plus component call:

<DatetimeInput v-model="form.stamp" :error="form.errors.stamp" class="pb-8 pr-6 w-full lg:w-1/3" label="Add time" />

makes this:

What i did wrong? How to style this, i read the documentation from element-plus website but i don't understand it and can't find styles file from it.

please be more specific what you want and the problem you are facing. As the picture I saw, the display is correct — Nguyễn Dương, Apr 16 '23 at 15:52
no it it's not, i want them to look the same what's not clear there? — Msover554, Apr 17 '23 at 05:32

score 0 · Answer 1 · answered Apr 17 '23 at 08:21

0

you need import css style

import 'element-ui/lib/theme-chalk/index.css';

answered Apr 17 '23 at 08:21

Jeffrey

37
6

score 0 · Answer 2 · answered Apr 19 '23 at 03:07

In my main.ts

import { createApp } from 'vue'
import App from '@/App.vue'
import router from '@/router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import "./app.css";

const app = createApp(App)

app.use(ElementPlus)
app.use(router)
app.mount('#app')

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

export default app;

My el-date-picker

style element-plus component in vue 3

2 Answers2