Skip to content
This repository has been archived by the owner on Nov 30, 2020. It is now read-only.

Many CSS-Classes not applied - even though no import errors #529

Open
joulnumberone opened this issue Jan 23, 2020 · 0 comments
Open

Many CSS-Classes not applied - even though no import errors #529

joulnumberone opened this issue Jan 23, 2020 · 0 comments

Comments

@joulnumberone
Copy link

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:

  1. Create Nuxt.js Application in Universial mode
  2. Install npm-packages as mentioned in the documentation
  3. 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'
    },
    ...
  ]
  1. Import styles in your component:
<style lang="scss" scoped>
@import "material-components-vue/dist/text-field/styles";
...
</style>
  1. 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.

Screenshots from Docu
image
image.

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
image
image

Desktop (please complete the following information):

  • OS: Win 10
  • Browser Chrome
  • Version 79
@ccleve ccleve mentioned this issue Feb 21, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant