Vue SFC组件的动态样式

Question

我正在寻找使用vuejs设计UI组件的最佳方法。这些组件用作UI库，并包括例如TextField组件。该组件具有多种状态（禁用，只读，必需等）。我已经测试了一些变体，以下是我想出的可能性：

1. 为每种样式创建一个CSS类，并动态绑定该类（即:class="disabled && $style.disabled"）
2. 为主要功能创建CSS类，并将动态样式与内联样式（即:style="disabled && { color: grey }"）绑定
3. 在JS库中使用CSS，在这里我可以最好地控制所生成的样式表，即，所生成的类也包含所有动态样式。 （例如vue-styled-components）

1.的缺点是，它非常罗word，我需要很多课程。 劣势。的2。就是，如果您要覆盖某些样式，则需要在使用的应用中指定!important。劣势。的3.是，我测试过的大多数库（例如css-in-js）都不允许指定 base 类（即ns-TextField field-123，而仅ns-TextField用于覆盖样式，但本身不提供样式。

styled方法似乎是react中最受欢迎的方法，所以我想知道为什么没有{em> official 方法在{{ 1}}。好像我在这里缺少什么。

此外，虽然解决状态问题（禁用，必需，只读）似乎很简单，但有时我有一个Component可以接收特定CSS属性的支持，例如vue。然后，我要么只为font-size的不同选项创建一个新类，要么使用内联样式绑定-再次需要font-size被覆盖。