Vamos a guardar tengo un .Vue componente que me agarra de Github en algún lugar. Vamos a llamar a CompB y vamos a añadir un CSS único conjunto de reglas que hay para un azul encabezado:

CompB.Vue (una dependencia que no es dueño de, tal vez, sacó de Github)

<template>
  ...
</template>

<script>
  ...
</script>

<style lang="scss" scoped>
  .compb-header {
    color: blue;
  }
</style>

I plan para anidar CompB en mi propio proyecto de la CompA. Ahora, ¿cuáles son mis opciones para reemplazar el ámbito de la regla?

InformationsquelleAutor prograhammer | 2016-12-14

2 Comentarios

  1. 17

    Después de jugar un poco, creo que tengo un buen enfoque.

    1. Global anula

      Para situaciones donde quiero saltarse las reglas en todos los casos para CompB me puede agregar un conjunto de reglas con más especificidad como este: #app .compb-header { .. }. Desde siempre nos sólo tiene una raíz (#app) es seguro utilizar un ID en el conjunto de reglas. Esto fácilmente reemplaza el ámbito de las normas en CompB.

    2. Padre anula

      Para situaciones en las que quiero reemplazar tanto a nivel mundial y en el ámbito de las reglas. Afortunadamente VueJS permite añadir un ámbito y sin ámbito estilo de bloque dentro de una .Vue archivo. Así que puedo añadir aún más específicos CSS conjunto de reglas. También aviso que me puede pasar una clase en CompB pilares desde Vue ofrece una función de la clase y el estilo accesorios para todos los componentes:

      //in CompA (the parent)
      
      <template>
        ...
        <!-- Vue provides built-in class and style props for all comps -->
        <compb class="compb"></compb>  
      </template>
      
      <script>
        ...
      </script>
      
      <style lang="scss">
        #app .compb .compb-header { 
          color: red; 
        }
      </style>
      
      <style lang="scss" scoped>
        ...
      </style>

      (nota: puede ser más específico y hacer que la clase se pasa en CompB tienen más nombre único, como .compa-compb o algunos hash sufijo así que no hay potencial de colisión con otros componentes que utilizan CompB y una clase .compb. Pero creo que podría ser excesivo para la mayoría de las aplicaciones).

    3. Y, por supuesto, CompB puede proporcionar su propia adicionales accesorios para el ajuste de CSS o el paso de las clases/los estilos en las zonas del componente. Pero esto no siempre puede ser el caso cuando se utiliza un componente que no es dueño (a menos que usted fork). Además, incluso con este siempre, siempre hay esas situaciones en las que son como «sólo quiero ajustar ese relleno tan sólo un poco!». Las dos soluciones parecen a un gran trabajo para este.

  2. 2

    Usted tendrá que agregar más la especificidad de peso a tu css. Usted tiene que ajustar ese componente en otra clase, de modo que se puede reemplazar. Aquí está el código completo

    <template>
      <div class="wrapper">
        <comp-b>...</comp-b>
      </div>
    </template>
    
    <script>
    import CompB from 'xxx/CompB'
    
    export default {
      components: {
        CompB
      }
    }
    </script>
    
    <style>
      .wrapper .compb-header {
        color: red;
      }
    </style>
    • ja, respondió en el mismo tiempo! Ver mi respuesta, aunque, he encontrado un buen enfoque global, +1
    • Creo que el un solución es enviar PR a la biblioteca y quitar scoped, el uso de BEM, o simplemente añadir un prefijo al nombre de la clase
    • Sí, todavía me encuentro con el BEM incluso en estas ámbito de las situaciones. Pero recientemente he descubierto que el ámbito no puede ser tan útil como yo pensaba originalmente. Gracioso, en realidad tuve un problema hace poco, en una de github paquete pidiendo que (BEM y no «ámbito»).
    • Por CIERTO, este algo es Reaccionar maneja mejor (por ejemplo, se puede pasar en los estilos de Reaccionar componentes para reemplazar el valor predeterminado queridos?)?
    • ámbito será de utilidad para los componentes de su propiedad (no publicado de la biblioteca), agregar ámbito y no es necesario agregar clase en todas partes, no más <button class="button">, acaba de escribir css para los nombres de las etiquetas h1 { ... } button { ... }
    • He leído en VueJS documentación que usted todavía necesita para agregar clases por motivos de rendimiento en estas ámbito de las situaciones.
    • Véase la parte inferior de la página de documentación aquí: vue-loader.vuejs.org/en/features/scoped-css.html #4 en la lista de Notas.

Dejar respuesta

Please enter your comment!
Please enter your name here