How to apply a CSS style to a specific class based on conditions in Vue.js

Question

How to apply a CSS style to a specific class based on conditions in Vue.js

Many questions have been asked about conditionally adding classes or styles to elements, but I want to take it a step further and conditionally style a class.

In my application, users can customize foreground and background colors using a theming system. I want to apply these colors to quill.js toolbar buttons dynamically. If I knew the colors beforehand, a simple CSS rule would do the trick.

.ql-toolbar .ql-stroke {
    stroke: #f00;
}

I could even create conditional classes for different color combinations in my stylesheet.

.ql-container.foo {
    .ql-toolbar .ql-stroke {
        stroke: #f00;
    }
}
.ql-container.bar {
    .ql-toolbar .ql-stroke {
        stroke: #b4c;
    }
}

However, since users can choose any RGB color, this approach won't work.

I've attempted adding inline styles to the component template, but encountered compilation issues.

Currently, I'm resorting to using document.querySelector to access the toolbar and manually change button properties based on user color selections. This is a messy solution that doesn't handle dynamic styles like hover states.

Is there a more elegant way to achieve this?

javascript css vue.js

Answer 1

Answer №1

After reading a helpful article, I discovered the solution is to utilize CSS variables and pass them through a style binding.

<template>
   <div class="container" v-bind:style="{'--toolbarColor': toolbarColor}">
      <!-- Quill editor component goes here -->
   </div>
</template>

<style>
    .ql-toolbar {
        background-color: var(--toolbarColor) !important;
    }
</style>

<script>
    export default {
        computed: {
            toolbarColor() {
                return '#f00'; // This sets the toolbar color dynamically
            }
        }
    }

</script>

Answer 2

After reading a helpful article, I discovered the solution is to utilize CSS variables and pass them through a style binding.

<template>
   <div class="container" v-bind:style="{'--toolbarColor': toolbarColor}">
      <!-- Quill editor component goes here -->
   </div>
</template>

<style>
    .ql-toolbar {
        background-color: var(--toolbarColor) !important;
    }
</style>

<script>
    export default {
        computed: {
            toolbarColor() {
                return '#f00'; // This sets the toolbar color dynamically
            }
        }
    }

</script>

Answer 3

Answer №2

To achieve this functionality, consider using the styled-components library

If you prefer a quicker setup, you can utilize the vue-styled-components package

const StyledDiv = styled.div`
  flex: 1;
  ${props =>
    props.justifyContent &&
    css`
      justify-content: ${x => x.justifyContent};
    `};
  ${props =>
    props.padd &&
    css`
      padding: 24;
    `};
`;

You can then use it in your Vue template like so:

<styled-div padd justifyContent="flex-start" ></styled-div>

Answer 4

To achieve this functionality, consider using the styled-components library

If you prefer a quicker setup, you can utilize the vue-styled-components package

const StyledDiv = styled.div`
  flex: 1;
  ${props =>
    props.justifyContent &&
    css`
      justify-content: ${x => x.justifyContent};
    `};
  ${props =>
    props.padd &&
    css`
      padding: 24;
    `};
`;

You can then use it in your Vue template like so:

<styled-div padd justifyContent="flex-start" ></styled-div>

How to apply a CSS style to a specific class based on conditions in Vue.js

Answer №1

Answer №2

Similar questions

Issue with floating right navigation functionality

Libraries using the bootstrap slider are revolutionizing the design of all other layouts

Transferring and bringing in components in React without ES6

Incorporating Dynamic Events into HTML Generated on the Fly within a Vue.js Component

JavaScript/Typescript is throwing an error because it is unable to access the property 'username' of an undefined object

Column Locking with Merged Rows

Enhancing User Experience with CSS

Can someone provide guidance on effectively implementing this JavaScript (TypeScript) Tree Recursion function?

Creating a delay with jQuery before hiding elements

Receive alerts for excessive memory consumption in Node.js

Guide on integrating external HTML into your Nuxt application using an object in a JavaScript file with an HTTP URL given by the bot constructor

Center the image within the div by setting its position to absolute

Tips for incorporating data directly within a D3 bullet chart

Toggle the visibility of elements (such as a form) with a click of a link - Utilize ajax to

Is there a way I can implement lazy loading of results without having to overhaul my entire Laravel + jQuery application built in the Single Page Application style?

"Explore the dropdown options on the Twitter Bootstrap menu by hovering your cursor

Multiple Class Changing Effects: Hover, Fade, Toggle

Turn off csrf protection when an internal express route is accessed

Displaying Highcharts Graph in Dual Containers

Transform the usual button into a jQuery button that requires a press and hold action