CODEWITHSUNDEEP
cssvue.js
Question3r
Question3r

Reputation: 3742

pass css as component parameter

I want to create a component with some CSS parameters. I know I'm not able to do something like this

<template>
  <div id="textContainer">
    {{ content }}
  </div>
</template>

<script>
export default {
  props: {
    content: String,
    textAlign: String
  }
};
</script>

<style scoped>
#textContainer {
  text-align: {{textAlign}}; // this won't work
}
</style>

but I thought about creating a component that deals with the css parameters in the HTML code like this example

<template>
  <div id="textContainer" :style="'text-align: {{textAlign}}'">
    this should be right aligned
  </div>
</template>

<script>
export default {
  props: {
    textAlign: String
  }
};
</script>

<style scoped>
#textContainer {
  text-align: center;
}
</style>

and consume it with

<MyComponent textAlign="right" />

I don't know if this won't work or my syntax is wrong. I provide a working example

https://codesandbox.io/s/my002w6oqy

and would like to know if there is a way to create components with dynamic css parameters. Otherwise I would have to create components which only differ in their css style.

Upvotes: 0

Views: 280

Answers (1)

akuiper
akuiper

Reputation: 214927

You can use the object syntax:

<template>
  <div id="textContainer" :style="{ textAlign }">
    this should be right aligned
  </div>
</template>

<script>
export default {
  props: {
    textAlign: String
  }
};
</script>

https://codesandbox.io/s/wnpl6zvnlw

Upvotes: 1

Related Questions