Le titre est réécrit comme suit : Variables CSS pour ajouter des styles en ligne dans Vue

Question

J'utilise des variables CSS dans le composant et je définis la largeur du div en fonction des données calculées dans setup()

setup(props) {
    const progressBar = PositionService.getProgressBar(props.position);
    const progressWidth = `${progressBar}%`;

    ...
    return { ..., progressWidth };
}

Ensuite, j'utilise cette variable comme variable CSS.

<style lang="scss" scoped>
.progress-bar-width {
  --progress-bar-width: v-bind("progressWidth");
  width: var(--progress-bar-width);
}
</style>

Lors du rendu de la page, j'ai remarqué que des styles en ligne étaient ajoutés au composant parent HTML, provoquant

<a href="#/1070/applications/status/1" class="card position-relative border-gray-300 border-hover overflow-hidden h-500px" data-v-61475b35="" style="--61475b35-progressWidth:43.0613%;">.....</a>

CSP bloque les styles en ligne, cette méthode ne fonctionnera donc pas. Comment utiliser des variables CSS sans styles en ligne ?

Answer 1

C'est une solution hacky mais comme il n'y a pas de styles en ligne, c'est la seule à laquelle je peux penser :

Ajoutez le composant "Styles" à votre modèle. Celle-ci sera remplacée par la balise dans le DOM. À l'intérieur du composant, ajoutez les variables CSS requises à :root

<component :is="`style`">
    :root { --progress-bar-width: {{ progressWidth }}; }
</component>
<div class="progress-bar-width"></div>

<style lang="scss" scoped>
.progress-bar-width {
  width: var(--progress-bar-width);
}
</style>