Styles don't apply on CSS scoped component

Question

I have following simple component:

<template>
    <div>
        <b-form-group label="From:" label-align="left" label-for="nested-from">
            <date-pick :displayFormat="'DD/MM/YYYY'" v-model.trim="search_form.date_from"></date-pick>
          </b-form-group>
        </b-col>
    </div>
</template>

<script>
export default {
    name: 'simpleComp'
}
</script>

<style scoped lang="scss">
@import "~vue-date-pick/src/vueDatePick.scss";

.vdpComponent.vdpWithInput > input {
  @extend .form-control !optional;
  display: block;
  border: 5px solid blue !important;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
</style>

here is the screenshot on console:

This's just a sample of a big project, basically I have an input in my component and styles don't get applied to it, but if I remove scoped then everything is back on track, but I want to keep it in scoped level.

I searched a bit and find this answer from SO:

For some reason, scoped styles don't get applied during hot reload when they are first added to the component. Full page reload fixes the issue, from there the styles, since they have been detected, get updated with consecutive hot reloads.

This answer is not convincing, like for what reasons? and how do I avoid it and fix the problem? How do I do a full hot reload when the home page is loaded?

I tried refreshing the page? rerunning the dev server, but still didn't work? Can anyone help? Thanks in advance.

Have you tried using class or id selectors to apply styles? — Yash Maheshwari
– Yash Maheshwari, Commented Jan 21, 2021 at 9:30
I tried this ` border: 5px solid blue !important;` it doesn't work. but if I apply this style from console it works without important. — Mir Stephen
– Mir Stephen, Commented Jan 21, 2021 at 9:40
Please provide the full code so we can see. The code you have supplied as an example does not suffer from any scoping or child component deep selector issues. — Ohgodwhy
– Ohgodwhy, Commented Jan 21, 2021 at 9:58

kissu · Accepted Answer · 2021-01-21 10:42:21Z

5

As told in the previous comments, since you're using SCSS here and targeting a 3rd party component, you need to write it this way

::v-deep .vdpWithInput input {
  // your fancy style here
}

It will help having it scoped in this specific component and not bleeding all over your app.

Useful link for the deep selectors: https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

edited Jan 21, 2021 at 10:42

answered Jan 21, 2021 at 10:37

kissu

47.3k16 gold badges94 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Styles don't apply on CSS scoped component

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related