A guide on transferring CSS module generated classes to components in Vue

Question

A guide on transferring CSS module generated classes to components in Vue

Looking to implement CSS Modules, however, it appears that vue does not have a built-in method to pass generated class names to child components.

Consider the scenario with two components:

Table.vue
TableRow.vue

With styles like this:

.table {
  table-layout: auto;

  &.hover .row:hover .cell {
    background-color: red;
  }
}

The styles generated for .row:hover no longer apply to TableRow, and I have yet to find a smooth way of passing it down to the child. The only solution I found involves passing the $style object as a prop to the child, which can get messy as the component tree grows larger since every component needs to include this prop and pass the $style object to subsequent children...

javascript css vue.js vuejs2

Answer 1

Answer №1

To apply a class to a component based on a variable, use v-bind.

<div :class="list_view === 'list' ? 'at-listview' : 'at-groupview'"></div>

In the example above, list_view is a variable.

If you need to pass these classes to another component, follow the same concept but this time pass the classes as a prop.

<child-component classes_to_send="class1 class2 class" />

Alternatively, you can bind a variable using a colon :.

<child-component :classes_to_send="class_from_variable" />

The classes can then be accessed in the props of <child-component/> as shown below:

<script>
   ...
   export default:{
      props:['classes_to_send'],
   }
   ...
</script>

<template>
   <div :class="classes_to_send"></div>
</template>

Answer 2

To apply a class to a component based on a variable, use v-bind.

<div :class="list_view === 'list' ? 'at-listview' : 'at-groupview'"></div>

In the example above, list_view is a variable.

If you need to pass these classes to another component, follow the same concept but this time pass the classes as a prop.

<child-component classes_to_send="class1 class2 class" />

Alternatively, you can bind a variable using a colon :.

<child-component :classes_to_send="class_from_variable" />

The classes can then be accessed in the props of <child-component/> as shown below:

<script>
   ...
   export default:{
      props:['classes_to_send'],
   }
   ...
</script>

<template>
   <div :class="classes_to_send"></div>
</template>

A guide on transferring CSS module generated classes to components in Vue

Answer №1

Similar questions

Navigate through FAQ items with sliders using Owl Carousel 2 - Easily switch between different chapters

Error Message: "Attempting to access the 'on' property of an undefined object leading to an error."

Incorporating a personalized image to create custom icons on the Material UI bottom navigation bar

Set a dynamic Active Class on various divisions by utilizing their respective indexes

Combining Vue.js with Laravel Blade

Utilizing LessCss for color transparency and variable declarations with @vars

"Ensuring a DIV element has a height of 100% within

Put the code inside a function. I'm new to this

The Jquery tooltip does not correctly track the mouse movement across all div elements

What is the process for implementing JavaScript in Django?

My goal is to dynamically assign a class to an iframe element by identifying a specific class contained within the html of the iframe

I'm feeling lost on how to implement a simple class pattern using object-oriented JavaScript

Stopping HTTP response in middleware using node.js and express - is it possible?

Incorporate characteristics into a text box using jQuery

The system encountered an issue with the CSS code, indicating "Invalid CSS after "...inear-gradient(": expected selector, was "{"

Transforming class components to utilize hooks (storing state within an if statement)

When attempting to retry in Next.js, the props obtained from getServerSideProps may

What methods can be used to supersede CSS styles?

Utilize inline scripts within the views of Yii2 for enhanced functionality

Creating dynamic values in data-tables using Vuetify