Global css file won't override component css-CodePudding

I have a file global.css in assets folder, file is imported in main.js. Styles from this file works only if i dont have same style applied in component style. For example, in component i have this

h1 {
  font-size: 50px;
}

then in global.css

h1 {
  font-size: 35px
}

this won't work. Is there a way to override component styles with this global.css?

CodePudding user response：

Make sure your style tag within component has scoped attribute otherwise it'll override global styles.

Review: https://codesandbox.io/s/vue-basic-demo-j87nz0?file=/src/components/HelloWorld.vue

CodePudding user response：

You need to look into CSS specificity to solve this issue.
Here, it's happening because the global style is applied at first, then component style comes in second, you could inspect that in your devtools and see various declarations applied to your h1 element.

There are of course advanced possibilities in CSS but writing something more specific

h1.my-cool-class { /* or just .my-cool-class */
  font-size: 50px;
}

should be enough here.

CodePudding user response：

You can use h1 { font-size: 35px !important; }

Or with classes

For example:

.headline-h1 {
  font-size: 35px
}

CodePudding user response：

Thank you everyone for answering. I had to deal with some messy css, every component had its own css style for every heading and paragraph(sizes, colors, fonts, etc.). I deleted all of these and put them in global.css file and then changed html elements to be compatible with sizes. That's it.