I have a a child component with a data-table. But the font-size of DOM inside the child component gets small. I'm trying to see if there a way to to increase the font-size of my data-table header and th. If there is also away to make to make the child component to keep the same font-size as the parent or grand-parent component.
I tried header {font-size:15px} and th {font-size:12x} inside the child component and didn't work.
Inside your Child component define your custom style in style scope has showing below:
<style scoped>
.v-data-table header {
font-size: 14px;
}
.v-data-table th {
font-size: 12px;
}
.v-data-table td {
font-size: 12px;
}
</style>
Related
I've been trying to change the background color of the popover body but it's not changing the color. If I remove scoped from styles then it works but when I use scoped and use deep selector, the color doesn't apply.
This is my code
<template>
<div>
<button
:id="callToAction"
>click me
</button>
<b-popover
:target="callToAction"
triggers="click blur"
custom-class="my-popover-class"
>
<div>Edit Me</div>
</b-popover>
</div>
</template>
<style scoped>
*>>>.my-popover-class {
background: black !important;
color: white !important;
}
*>>>.my-popover-class .popover-body {
color: white !important;
background: black !important;
}
</style>
I am familiar with this issue because I use Bootstrap-vue for almost all of my projects.
If I have to override any of the bootstrap components, I just simply remove the scoped from style. If you need to use scoped and also want to override bootstrap components then you should select its wrapper selector and nest it.
For the first selector, you shouldn't need a deep selector, as the class is added to the root element of the popover, which has the data-v-**** attribute from the scoped tag.
The second one you'll need one, but you need to place it after .my-popover-class. That way your selector will be rendered as .my-popover-class[data-v-****] .popover-body, which should work.
<style scoped>
.my-popover-class {
background: black !important;
color: white !important;
}
.my-popover-class >>> .popover-body {
color: white !important;
background: black !important;
}
</style>
Example on codesandbox
For example, if my app has two components with this SCSS
A component:
<style lang="scss" scoped>
.example {
color: red;
}
</style>
Another component:
<style lang="scss" scoped>
.another-example{
background: yellow;
}
</style>
Then I would like to have the SCSS from each component nested into one selector, so the resulting CSS will be
#my-app .example {
color: red;
}
#my-app .another-example{
background: yellow;
}
Is it possible to do this without going into every single component and nesting the SCSS inside the #my-app selector in every component?
I added this css rule
<style>
body {
background-color: rgb(184, 182, 182);
}
#app {
...
</style>
to my App.vue file within the tag (not scoped ;-); as learned in vue mastery courses. Which BTW are a great help!
This approach also is proposed by Babacadabra in a related post.
Everything builds fine, and the locally defined (scoped) styles of a component can be found in the dist/css folder.
But my global style declaration for the background-color disappeared. As result the website layout is different than the one I tested locally (using 'vue serve'):
The background color is not applied.
What am I making wrong?
I helped myself by adding the background-color declaration directly to my index file, but that should be a patch only. I'm looking for a final solution, so the complete workflow works as expected and local and remote versions behave the same.
UPDATE (more code):
As requested here more details, i.e. the complete App.vue. I hope that is sufficient, since to my (very basic ;.-) understanding of vue the global style declarations go into this Module.
<template>
<div id="app">
<img class="vservuLogo" alt="VservuLogo" src="./assets/VservU-Logo.png">
<HelloWorld msg="Welcome to VservU GmbH Munich"/>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "app",
components: {
HelloWorld
}
};
</script>
<style>
body {
background-color: rgb(184, 182, 182);
}
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.vservuLogo {
width: 50%;
}
</style>
UPDATE2:
Since I could not reproduce that behavior in a new project, I guess I simply missed to clear the cache!
Assuming I am using a plugin that generates html at runtime where I cannot edit the CSS or JS code, leaving me with the only option of overriding certain CSS in particular classes. For instance, in such case I'd often do:
.video-player{
max-height: 500px !important;
}
In case such styling must be handled conditionally based on the props passes to the component, for instance:
<videoPlayer :goSmall="anotherColumn != null"></videoPlayer>
since the CSS in the videoPlayer components must go in the Style tag:
<style scoped>
.video-player{
max-height: 500px !important;
}
</style>
how can I render it conditionally?
It is such a bad idea to append it to the DOM using lifecyle hooks, so please do not suggest anything like that.
Why not apply a specific class to the component instead of passing a prop?
<videoPlayer :class="{ small: anotherColumn != null }"></videoPlayer>
And the css
<style scoped>
.video-player.small {
max-height: 500px !important;
}
</style>
If you are not okay with dynamically applying CSS using lifecycle hooks. You can always box your components. Make two components for your videoPlayer, we'll call them videoPlayerOriginal and videoPlayerSmall.
//videoPlayerOriginal.vue
<videoPlayer></videoPlayer>
Add your css in videoPlayerSmall.vue
//videoPlayerOriginal.vue
<videoPlayer></videoPlayer>
<style scoped>
.video-player{
max-height: 500px !important;
}
</style>
Now render either one of them conditionally.
I'm new to LESS and I would like to know what's the best solution to have a dynamic mixin. What I want to do is change the border color depending on the parent wrapper.
For exemple .letterList & .letterActive are inside a .azStores wrapper class. Here my mixin is set to #azStoresMainColor.
In my html the wrapper class is changing dynamically (categoryStores, floorStores...) and I want to change the color of the border depending on those wrapperClass.
Is there a nice solution to do that in LESS ? Thanks a lot in advance.
.grouplistBorderMixin() {
border-top: 2px solid #azStoresMainColor;
}
.letterList div:nth-child(1) {
.grouplistBorderMixin;
box-sizing: border-box;
}
.letterActive {
text-align: center;
height: 94px;
line-height: 94px;
.grouplistBorderMixin;
box-sizing: border-box;
}