css - 将 css 作为组件参数传递

Question

我想创建一个带有一些 CSS 参数的组件。我知道我不能做这样的事情

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

但我想创建一个组件来处理 HTML 代码中的 css 参数，就像这个例子

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

并使用它

<MyComponent textAlign="right" />

我不知道这是行不通还是我的语法有误。我提供了一个工作示例

https://codesandbox.io/s/my002w6oqy

并想知道是否有一种方法可以创建具有动态 css 参数的组件。否则我将不得不创建仅 css 样式不同的组件。

Answer 1

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