-
Notifications
You must be signed in to change notification settings - Fork 42
Many CSS-Classes not applied - even though no import errors #529
Description
Describe the bug
First of all I'm using Vue.js with Nuxt.js and want to import <m-text-field>
& <m-select>
into my component. To use Vue-Components in Nuxt you need to import them as plugins. In the description of this repository is written, that these components support SSR - but it's only possible to import the plugins on the client (but that's not the main thing). In the @material
library underscores are missing on mixins, variables and functions SCSS import paths.
However, if I add a <m-text-field>
Component, only a few styles like the class .mdc-text-field
are applied. The major part of the styling is not applied, even though the import paths should work and all styles should be available. Also i want it outlined - that way it is even more surprising how the result looks.
To Reproduce
Steps to reproduce the behavior:
- Create Nuxt.js Application in Universial mode
- Install npm-packages as mentioned in the documentation
- Create Nuxt.js plugin
~/plugins/textfield.js
with following code:
import Vue from 'vue'
import TextField from 'material-components-vue/dist/text-field'
Vue.use(TextField)
Do that for all Elements used on your page
4. Add plugins in nuxt.config.js
or in component
plugins: [
{
src: '~/plugins/textfield.js',
mode: 'client'
},
...
]
- Import styles in your component:
<style lang="scss" scoped>
@import "material-components-vue/dist/text-field/styles";
...
</style>
- Add the Material-Component in your components template section and bind the v-model to a data field (
<client-only>
tag excludes elements from SSR):
<client-only>
<m-text-field v-model="text" id="my-text-field" outlined>
<m-floating-label for="my-text-field">label</m-floating-label>
</m-text-field>
</client-only>
<script>
export default {
data() {
return {
text: ''
}
}
</script>
Expected behavior
I expected a fully styled outlined TextField like on the screenshots from your docu.
Actual behavior
Only a few styles got applied. Even the border is from the user agent stylesheet. No error messages occured. All paths, filenames and other imports and inclulde should work..
Screenshots from actual implementation on page
Desktop (please complete the following information):
- OS: Win 10
- Browser Chrome
- Version 79