This question already has an answer here:
Vuetify - CSS not working (taking effect) inside component
(1 answer)
Closed 4 years ago.
I am trying to modify the css of the vuetify components for example change the font-size to 10px, but it does not take my class into account
Is there a solution for this ?
I'm gonna assume you are using one of the pre-processors out there (SASS or Stylus).
So the thing is that you probably have the style section scoped for example <style lang="scss" scoped>.
What you want to do, is to use the deep selector so the styles from your parent component will leak into the child component, in this case vuetify component.
That can be achieved in sass like so:
<template>
<div class="button-wrapper">
<v-btn color="success">Success</v-btn>
</div>
<template>
And then in the style tag:
<style lang="scss" scoped>
.button-wrapper /deep/ button{
background: #00e389;
color: #fff;
}
</style>
Note: I do not use Stylus but if I'm not mistaken the syntax for deep is >>> so in this case, it will be .button-wrapper >>> button. you can read more about it here in the vue-loader docs
You could add this to your component:
<!-- in your component -->
<template>
<p class="change-font">Changing font</p>
</template>
<script>
export default {
};
</script>
<style lang="css" scoped>
.change-font{
font-size: 10px;
}
</style>
If you are using stylus, scss, or something else, change lang="css" to lang="stylus" or lang="scss"
Hope this helps.
If you are using stylus, you can do it :
<style lang="stylus" scoped>
.wrapper >>> button
font-size 10px
</style>
Related
I'm using Laravel 8 and Vue.js together. So I'm developing a website with Blade and Vue components.
I want something to add scss code in a specific Blade template. Exactly like a Vue component:
// Vue component example
<template>
...
</template>
<script>
...
</script>
<style lang="scss" scoped>
// SCSS codes scoped here
</style>
I want something exactly like <style lang="scss" scoped> in Blade.
Thank you.
you can use blade #stack and #push
in layout.blade.php
#stack('css')
in specific.blade.php
#push('css')
<style>
</style>
#endpush
like this when specific.blade.php will load then only that css will load in layout which is same as vue scoped
ref link
https://laravel.com/docs/8.x/blade#stacks
I have been in a simular situation. I'm not aware of this being possible without a lot of work (on the blade compiler side). Having <style lang="scss" scoped> in blade would require scss compilation and scoping. A simpler solution would be as Kamlesh suggested, supplying the style in the template.
Something that does come close as well albeit without scss compilation is having the ability to write multiple vue single file component-like components in your blade templates. Vue does not provide this ability (as elegantly as with vue files imho), but with a layer called vue blocks you may achieve the following:
<template component="some-component">
<div>
<p>My paragraph</p>
<div class="some block"></div>
</div>
<style scoped>
:root {
background: black;
padding: 20px;
margin: 20px;
}
p {
color: red;
font-weight: bold;
}
.block {
border: 3px solid green;
height: 20px;
}
</style>
<script>
// vue component here
export default {
data() { return { } },
mounted() {
}
}
</script>
</template>
More information can be found here:
https://fluxfx.nl/vue-blocks/examples/index.html#/features/scoped-styles
I am trying to change color of text using style css in v-textarea but it only change outline
<v-textarea style="color:blue"></v-textarea>
Try this:
<style>
.my-textarea textarea { color: blue !important }
</style>
<v-textarea class="my-textarea"></v-textarea>
The answer of F.NiX will be correct if you want your style to be applied globally.
If you work in a component and must stay in a scoped style. You must provide deep selector because this is a dynamic generated content.
<v-textarea
class="my-textarea">
</v-textarea>
<style scoped>
.code-style /deep/ textarea{
color:red !important;
}
</style>
I'm using Svelte and Parcel along with Sass but can't get any scss within the <style> tags to render correctly. Below is an example of what I'm using.
<style lang="scss">
$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);
.alert {
border: 1px solid $border-dark;
}
</style>
Ok! For those looking for the solution, it's actually very easy, just took me a while to find it!
Create a svelte.config.js file at the root of your project
Install svelte-preprocess using npm or yarn
Use the below code in the svelte.config.js file
const sveltePreprocess = require('svelte-preprocess');
module.exports = {
preprocess: sveltePreprocess(),
};
Add 'lang=scss' to your style tags like the below example
<style lang="scss">
$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);
.container {
border: 1px solid $border-dark;
}
</style>
Enjoy writing Sass in your Svelte components!
The following element works fine in Chrome, but not in firefox.
What I'm expecting to see is my theme colours, which is defined in a separate place.
Now in firefox, the component itself renders, and it even creates the .swatch div, with the correct size of 40x40, as specified in the shadow dom styles. Unfortunately the background-color and border css rules are never applied.
The console output in firefox and chrome is exactly as I would expect, with the correct colours, which tells me that the values does exist, but for some reason the data is not bound to the template in firefox?
<polymer-element name="color-sample" attributes="color border">
<template>
<style>
.swatch {
width: 40px;
height: 40px;
margin-right: 0.5em;
background-color: {{ swatchColor }};
border: 1px solid {{ borderColor }};
}
</style>
<div id="sample" layout horizontal center>
<div class="swatch"></div>
<content></content>
</div>
</template>
<script>
Polymer({
color: "white",
border: "lightGrey",
ready: function() {
this.swatchColor = CoreStyle.g.theme[this.color];
this.borderColor = CoreStyle.g.theme[this.border];
console.log(this.swatchColor);
console.log(this.borderColor);
}
});
</script>
</polymer-element>
I should also point out that if I use inline styles directly on the .swatch div, then the binding seems to work fine, but I'm specifically looking for a solution to bind to the css directly to keep the html clean.
Seems I found the problem right after I posted.
Data binding isn't fully supported in <style> under the shadow dom.[1]
[1] https://github.com/Polymer/polymer/issues/456
After creating a listview from VS2010 and adding it as a web part to sharepoint 2010, the rows have an alternating color which i do not want but cannot seem to change. I have tried putting in conditional formatting for columns and rows as well but it does not work!
I have tried changing the style in the .ascx file as well to :
<style type="text/css">
.style1
{
width: 159px;
height: 53px;
background-color: White;
text-align:left;
}
</style>
<img alt="" class="style1"
<SharePoint:ListViewByQuery runat="server" ID="ProjectsListView" class ="style1" />
but nothing seems to work! Does anyone have a solution for this? thank you!
Try:
<style type="text/css">
.ms-alternating
{
background-color: White;
}
</style>