How Do I change font-size in vuetify component
Set the font-family on body. If you are importing the Vuetify stylus entry, main.styl overwrite the $font-family variable.
Change font size in Vuetify based on viewport?
I too have been trying to solve this riddle, as it feels gross to reach into javascript to handle simple style changes for different device sizes.
As it turns out, generating custom css rules for different breakpoints is quite easy because Vuetify is leveraging Stylus and assigning the breakpoints to a Stylus variable. Naturally, this variable is available in your custom vue components and style files (provided you have the proper pre-processor setup to compile stylus).
Here are some resources that helped me understand things better:
Pre-processor setup:
- https://vuetifyjs.com/en/framework/theme#setup-stylus-loader-with-webpack
- In my case, by using Nuxt, the pre-processor setup for stylus was already set up for me. But for this approach to work, you'll need to be sure you can compile Stylus.
Modifying Stylus Variables - Vuetify:
- https://vuetifyjs.com/en/framework/theme#modifying-stylus-variables
- On this page, you'll find a link to all the stylus variables that Vuetify is incorporating: https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/stylus/settings/_variables.styl
Stylus @media queries - http://stylus-lang.com/docs/media.html
As you'll see, the $display-breakpoints Stylus Object is your new best friend!
Boil it all down, and here's what you get in a Vue single file component:
<template>
<v-layout column justify-center align-center>
<v-flex xs12 sm8 md6>
<v-card>
<v-card-title class="custom-selector headline">
Welcome to the Vuetify + Nuxt.js template
</v-card-title>
</v-card>
</v-flex>
</v-layout>
</template>
<script>
export default {
// ...
}
</script>
<style lang="styl">
.custom-selector
font-size 3em
@media $display-breakpoints.xs-only
font-size 2em
@media $display-breakpoints.lg-and-up
font-size 5em
</style>
Notice in the code above, we are changing the font-size of the <v-card-title>
component by targeting it in our Stylus media queries and using the $display-breakpoints object to identify the desired breakpoint.
I think the benefit of not having a UI framework that generates every option at every breakpoint is a much smaller file to load. It seems like Vuetify+Stylus is a lighter approach that makes writing custom @media queries the simplest and most efficient approach.
Change font-size of <v-radio> vuetify
Got the answer. In my css file all i have to do is
.customClass >>> label
adding those >>> icon solved the problem.
How to change font-family in Vuetify?
Update
Vuetify declares the font on .v-application
and unfortunately also declare the font as !important
on .v-application .text-hN
. I can suggest you some ideas to modify your font:
If you want to change every text-h4: You can override the style of text-h4 by modifying its default ($headings then
'h4') https://vuetifyjs.com/en/features/sass-variables/#example-variable-fileIf you want to keep default text-h4: You can remove the
text-h4
class and use your own classcustom-header
with copied rules of text-h4 plus your font-family rule. You won't need higher specificity, nor to use !important.
Something like:
.custom-header {
font-size: 2.125rem !important; /* from .text-h4 */
line-height: 2.5rem; /* from .text-h4 */
letter-spacing: .0073529412em !important; /* from .text-h4 */
font-weight: 400; /* from .text-h4 */
font-family: YOUR_FONT_FAMILY, Roboto, sans-serif;
}
Previous answer
Give your element another class:
<div class="text-h4 anotherClassForExample">Text family I want to change</div>
Override the font-family of this new class in your css.
I was in a similar position before, I had some basic css knowledge and started using frameworks. I strongly recommend you to master CSS before using a UI framework. Starting by using a framework looks faster, shinier and easier but in the long term it is not. You will be blocked a lot and maybe in the future you will change to another one or even want to not use any.
How to increate vuetify data table font-size?
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 Topics
How to Get Dynamically Generated Table Td Input Value
How to Add a Simple Onclick Event Handler to a Canvas Element
Retrieving Json Response Data With Dynamic Key
How to Refresh the Data in a Jqgrid
Calculate Distance Between Two Moving Elements
Redirecting With JavaScript If a Radiobox Is Checked
Increase JavaScript Heap Size in Create-React-App Project
How to Instantiate a File Object in JavaScript
How to Unmute Html5 Video With a Muted Prop
How to Redirect to Another Component Onsubmit Search
Get Selected Item Value from Bootstrap Dropdown With Specific Id
How to Attach Multiple Images in a Embed
How to Remove the X-Axis from a Bar Chart Produced by Google'S Visualization API
Json to CSV Flattening Nested Json
How to Detect iPad and iPad Os Version in iOS 13 and Up
How to Scroll Left or Right Inside a Div Using Pure JavaScript Function and No Jquery