Vue.jsで style scoped な単一ファイルコンポーネントのcssをオーバーライドする

https://medium.com/vuejs-tips/override-scoped-css-de4275119b87 単一ファイルコンポーネントを作る時、 style scoped として CSSの影響範囲をコンポーネント内に収めるわけですが、 コンポーネント外部から内部のスタイルを変更したい場合があります。 <template> <div class="box"> <div class="message"> <slot></slot> </div> </div> </template> <script> export default { name: 'box' } </script> <style scoped> .box { display: inline-block; } .box .message { background-color: orange; padding: 1

[sho_yamane]

これ自分も困ってたけどこれが正解でいいんだろか。アトミックデザインやってると結構困るんよね