Vue js : Child component's CSS is overridden by the parent tag <h1>

Hello ,

First let me show you the parent component :

(...)
<div class="card-header">
                            <h1>
                                <company-edit :id="companyId" :key="companyId"></company-edit>
                            </h1>
</div>

(...)


<style scoped></style>

As you can see there is no specific styles.

component :

 <div class="form-group row">
        <label class="col-4 col-form-label pr-0" :for="'companyNameI"> Company name in-				 
                 house</label>
     <div class="col">
            <input (...)

<style scoped></style>

The problem is when I put <company-edit> inside <h1></h1> tag all the content of the <company-edit> is overridden by H1 style, and all the form labels are on H1 style!

Is there a way to "scope" the CSS of child component ?

Thanks

double-a

5 years ago

Level 1

why you don't replace h1 with div, what is the point of using h1 when u don't one the only child to inherit the style ??

you can scope the css in vuejs components

<style scoped>
	// your styles here
</style>

but you don't have to, replace the h1 with div and style the child however u like

Please or to participate in this conversation.