[Vuejs]-Inject styles using Aphrodite on vue plugins

by

0👍

I don’t think that this is possible for elements nested in the child component, unless the plugin has a props interface allowing you to pass in classnames yourself.

classes added like you show above are added to the root element of the component only.

Aphrodite requires that the generates class is directly added to the element, but you can’t access that element from within Vue as it’s controlled by the child.

Furthermore, even if possible, this is not a very reliable way of overwriting styles because it:

  • can only work if the CSS in the child component also has a specificity of 1
  • even if both have specificity of 1, it relies on the aphrodite class definitions appearing after the ones of the child, which can depend on your build setup.

So in short: I don’t think that will work in any reliable way.

Leave a comment