Soy consciente de que puede especificar los estilos dentro de Reaccionar clases, como este:

var MyDiv = React.createClass({
  render: function() {
    var style = {
      color: 'white',
      fontSize: 200
    };

    return <div style={style}> Have a good and productive day! </div>;
  }
});

Debería ser el objetivo de hacer todo el estilo de esta manera, y no tienen los estilos en todos los especificados en mi archivo CSS?

O debo evitar estilos en línea completamente?

Parece raro y complicado para hacer un poco de ambos – dos lugares tendría que ser revisado al ajustar el estilo.

  • Usted puede usar reaccionar-tema para organizar sus estilos en línea y hacerlos fácilmente personalizable cuando usted está construyendo un componente reutilizable. Funciona de forma similar a ThemeManager en material de interfaz de usuario.
  • Considere el uso de github.com/css-modules/css-modules. github.com/gajus/react-css-modules es una de Reaccionar de la aplicación (que yo soy el autor de la). Módulos CSS y Reaccionar Módulos CSS asigna automáticamente el componente de nombres de la clase CSS de los módulos a los que se asigna un nombre único en el alcance del documento.
  • Puedo usar CSS, mientras que tener que escribir consultas de medios de comunicación. Yo también uso las clases a partir de una base de CSS biblioteca como bootstrap.
  • Mediante el atributo de estilo como el principal medio de elementos de diseño generalmente no se recomienda. (reactjs.org/docs/dom-elements.html#style)
  • A partir de hoy, yo recomiendo usar un css-en-js solución. Tiene todas las ventajas de el atributo de estilo, sin los inconvenientes. Escribí una respuesta stackoverflow.com/questions/26882177/…
InformationsquelleAutor eye_mew | 2014-11-12

17 Comentarios

  1. 449

    No hay una gran cantidad de «Mejores Prácticas» todavía. Aquellos de nosotros que estamos usando en línea-estilos, para Reaccionar componentes, están todavía muy experimentando.

    Hay una serie de enfoques que varían enormemente: Reaccionar en línea de estilo lib tabla de comparación

    Todo o nada?

    A lo que nos referimos como «estilo» en realidad incluye un par de conceptos:

    • Diseño — cómo un elemento/componente se ve en la relación con los demás
    • Apariencia — las características de un elemento o componente
    • El comportamiento y el estado — cómo un elemento/componente se ve en un estado determinado

    De inicio con el estado estilos

    Reaccionar ya está gestionando el estado de sus componentes, esto hace que los estilos de estado y comportamiento un ajuste natural para la coubicación con su componente de lógica.

    Lugar de la construcción de componentes para el procesamiento con condicional del estado-clases, considerar la adición de estado-estilos directamente:

    //Typical component with state-classes
    <li 
     className={classnames({ 'todo-list__item': true, 'is-complete': item.complete })} />
    
    
    //Using inline-styles for state
    <li className='todo-list__item'
     style={(item.complete) ? styles.complete : {}} />

    Nota que estamos usando una clase de estilo apariencia pero no el uso de cualquier .is- el prefijo de la clase para estado y comportamiento.

    Podemos utilizar Object.assign (ES6) o _.extend (subrayado/lodash) para agregar el soporte para varios estados:

    //Supporting multiple-states with inline-styles
    <li 'todo-list__item'
     style={Object.assign({}, item.complete && styles.complete, item.due && styles.due )}>

    De personalización y la posibilidad de reutilización

    Ahora que estamos utilizando Object.assign se vuelve muy simple para hacer que nuestro componente reutilizable con diferentes estilos. Si queremos reemplazar los estilos por defecto, podemos hacerlo en la llamada-sitio con los apoyos, así: <TodoItem dueStyle={ fontWeight: "bold" } />. Implementado como este:

    <li 'todo-list__item'
     style={Object.assign({},
             item.due && styles.due,
             item.due && this.props.dueStyles)}>

    Diseño

    Personalmente, no veo razón de peso para en línea de diseño de los estilos. Hay una gran cantidad de CSS diseño de sistemas de allí. Yo sólo había uno.

    Que dijo, no agregue diseño de estilos directamente a su componente. Envuelva sus componentes con el diseño de componentes. He aquí un ejemplo.

    //This couples your component to the layout system
    //It reduces the reusability of your component
    <UserBadge
     className="col-xs-12 col-sm-6 col-md-8"
     firstName="Michael"
     lastName="Chan" />
    
    //This is much easier to maintain and change
    <div class="col-xs-12 col-sm-6 col-md-8">
      <UserBadge
       firstName="Michael"
       lastName="Chan" />
    </div>

    Para el diseño de apoyo, a menudo trato de diseño de los componentes a ser 100% width y height.

    Apariencia

    Esta es la zona más conflictiva de la «línea de estilo de» el debate. En última instancia, es el componente de su diseño y la comodidad de su equipo con JavaScript.

    Una cosa es cierta, entonces usted necesitará la ayuda de una biblioteca. En el navegador de los estados (:hover, :focus), y los medios de comunicación-las consultas son dolorosas en raw Reaccionar.

    Me gusta Radio porque la sintaxis para aquellos de difícil partes está diseñado para el modelo de SASS.

    Código de organización

    A menudo verás un estilo de objeto fuera del módulo. Para una tarea de la lista de componentes, podría ser algo como esto:

    var styles = {
      root: {
        display: "block"
      },
      item: {
        color: "black"
    
        complete: {
          textDecoration: "line-through"
        },
    
        due: {
          color: "red"
        }
      },
    }

    funciones de captador de

    La adición de un montón de estilo de la lógica a la plantilla puede ser un poco desordenado (como se ve arriba). Me gusta crear funciones de captador para calcular los estilos:

    React.createClass({
      getStyles: function () {
        return Object.assign(
          {},
          item.props.complete && styles.complete,
          item.props.due && styles.due,
          item.props.due && this.props.dueStyles
        );
      },
    
      render: function () {
        return <li style={this.getStyles()}>{this.props.item}</li>
      }
    });

    Más viendo

    He hablado de todo esto en más detalle en Reaccionar Europa a principios de este año: Estilos en línea y cuando es mejor que ‘sólo el uso de CSS.

    Estoy feliz de ayudar a hacer nuevos descubrimientos a lo largo del camino 🙂 me Golpeó -> @chantastic

    • Gran lectura. También muy apreciada esta relevante hablar por usted, @chantastic. #aceptado
    • «Envoltura de sus componentes con el diseño de los componentes»: Tan obvio, pero exactamente lo que yo necesitaba.
    • gran respuesta. Dentro de un año, es todo cierto? En realidad sólo acaba de entrar en Reaccionar y la idea de en línea estilo, y sólo se preguntaba si algo ha cambiado desde que se publicó esta respuesta.
    • gracias! creo que la respuesta que aquí todavía se mantiene bastante bien. la única área que ha cambiado es que Afrodita parece ser la comunidad preferidos en línea-los montantes de la biblioteca (más de Radio)—a pesar de que es realmente una cuestión de preferencia personal.
    • oops. accidentalmente enviado temprano. Yo ahora nosotros este componente técnica para el estilo de mis componentes. la idea es bastante simple. crear componentes que sólo se ocupan de la aplicación de estilo y componer con ellas, en lugar de div, span, a, etc. ayudará a mantener el estilo aislado, independientemente de que la biblioteca de su uso. reactpatterns.com/#Style componente
    • La optimización de la representación del navegador, es decir, la mejora del rendimiento para dispositivos móviles requiere mantener la cantidad de elementos en una página a menos de 800. Reactjs ya requiere que se proporcione un contenedor div para cada componente. Por que la naturaleza es ya es defectuoso. La aplicación de oocss igual que las clases, es decir, una cuadrícula de clase en un div para envolver a su componente exacerba el problema. Línea de base: no utilice reaccionar. Definitivamente no uso en línea de estilo.
    • Estoy aprendiendo a reaccionar, y trató el enfoque sugerido, pero la de abajo no parece funcionar (añadido en jsx dentro de render, que requiere para ser className), o cómo debo hacerlo? <div class="col-xs-12 col-sm-6 col-md-8"> <UserBadge
    • mis disculpas. Debe ser className, no class. La respuesta ha sido actualizado.
    • Estoy trabajando en un SPA con una gran cantidad de componentes. ¿Cuáles son sus puntos de vista en relación con la actuación de los estilos utilizando diferentes técnicas. También, sería bueno tener diferentes archivos css para los diferentes componentes e incluir esos?
    • Me adoptar un enfoque pragmático para el rendimiento. Yo autor en la forma en la que me parece más productivo, a continuación, modificar para pref cuando un problema aparece. Perf para en línea vs css-en-js, vs css depende de muchos detalles. Para las aplicaciones en las que estoy trabajando ahora, puedo usar un css biblioteca llamada minions, de la cual hablé en Nodevember en 2015. Saludos!
    • Puede usted explicar cómo esta pieza funciona o me dan el plazo para la investigación item : { complete : { textDecoration : 'line-through', }, }. Parece como una especie de estilo anidado?
    • es que no tienen que estar anidados. la ilustración no es preceptivo. los objetos anidados podría ser aplanado en su propio vars.
    • ¿qué acerca de ‘estilo de sus componentes, creo que reemplazar todo lo que conocemos en estos días.
    • Mi sensación es que al menos algunas de las personas que piensan en línea de estilo es mejor que la externa sass podría no saber mucho acerca de píxel perfecto, capacidad de respuesta, calidad de producción de diseño. Hay una gran diferencia entre hacer algo de aspecto de aproximadamente decente en una app y conseguir algo, justo a la derecha a través de una variedad de navegadores y dispositivos y el área de visualización de los tamaños.
    • Las actualizaciones de este post para el 2018 cambios en ReactJs en línea con el estilo de tendencias y mejores prácticas? He visto un montón de gente que se mueve a la línea de estilo y yo no puedo ver a una mejor práctica, pero aún así…
    • Estos dos productos parecen tener la mayoría de mindshare para la web: emotion.sh y styled-components.com.
    • Mi favorito personal es reaccionar-nativo de la web pero la API parece adaptadas a equipos que están haciendo Nativas y Web apps y quieres un peinado comunes de la API para el intercambio de componentes.

  2. 122

    El atributo style en Reaccionar espera que el valor de un objeto, es decir, valor de la Clave par.

    style = {} tendrá otro objeto en su interior, como {float:'right'} para hacer que funcione.

    <span style={{float:'right'}}>{'Download Audit'}</span>

    Espero que esto resuelve el problema

    • entonces, ¿cómo utilizar los medios de consulta para el mismo si quiero usar Clases css en el archivo JS
    • Es una forma de utilizar Emoción aquí es una lección de que si estás interesado desde meet.js cumbre 2018
    • Una desventaja de este enfoque es que la definición de estilos en línea crea un objeto nuevo cada vez. Esto crea un diff en el style la proposición que podría conducir a problemas de rendimiento. Al menos, definir una constante de estilo como este fuera de su render. Espero que esto ayude!
  3. 48

    Puedo usar estilos en línea ampliamente dentro de mi Reaccionan los componentes. Me parece mucho más clara para colocate estilos dentro de los componentes porque siempre está claro lo que los estilos de la componente funciona y lo que no tienen. Además de tener toda la potencia de Javascript en mano realmente simplifica más complejo de estilo necesidades.

    Yo no estaba muy convencida al principio, pero después de probar en varios meses, estoy plenamente convertidos y estoy en el proceso de conversión de toda mi CSS en línea o de otro JS-impulsado css métodos.

    Esta presentación por Facebook empleado y Reaccionar colaborador «vjeux» es realmente útil como bien https://speakerdeck.com/vjeux/react-css-in-js

    • ¿Cómo voy a ir sobre la fabricación sensible diseños con estilos en línea? Usted no tiene la opción para consultas de medios de comunicación aquí.
    • Tienes el poder de js js pueden detectar tamaños de navegador para generar dinámicamente los estilos.
    • que no es un método recomendado ahora, de todos modos, ya que hay mucho más poderosas soluciones para el estilo componentes como CSS Modules, styled-components y otros.
    • Hay css en js como bien =) yo prefiero usar CSS Módulos, por el momento, sin embargo.
    • Una cosa que no se considera aquí es que es muy fácil ver los padres y el niño de estilos en el mismo archivo SASS, mientras que si usted necesita para mirar las reglas en diferentes componentes, podría ser la apertura y el cierre de una gran cantidad de archivos.
  4. 22

    El propósito principal de el atributo de estilo es dinámico, basado estado estilos. Por ejemplo, usted podría tener un estilo de ancho en una barra de progreso basado en algún estado, o la posición o la visibilidad basada en algo más.

    Estilos en JS imponer la limitación de que la aplicación no puede proporcionar la costumbre de estilo para un componente reutilizable. Esto es perfectamente aceptable en las situaciones ya mencionadas, pero no al cambio de las características visibles, sobre todo el color.

    • Una relativa idea que teníamos desde hace algún tiempo es la capacidad de aislar específico de reglas CSS para Reaccionar con el componente mediante trago y MENOS. Algo así como la configuración de un determinado nombre de la clase para cada componente, a continuación, añadir el CSS para que la clase en el interior del archivo del componente. Esto tendría mucho sentido.
    • Yo uso a menudo los nombres de clase en el formato de «componente-{app}-{nombrecomponente}». «{app}» podría ser el nombre de la aplicación, o «común» para la aplicación de componentes independientes. por ejemplo, «componente-foo-todo-list» para TodoList y «componente común interruptor de la luz-toggle». Para empaquetados {app} sería el mecanismo nacional de prevención de nombre. Es que lo que se está refiriendo?
    • Sí, bueno, la convención de nomenclatura es una cosa, pero lo principal sería añadir aislado reglas CSS en el mismo componente de archivo js.
    • Esto no es cierto. Usted puede definitivamente personalizar estilo para reaccionar componentes. El componente sólo tiene que combinar su estilo propio objeto con un objeto manos desde arriba, que puede venir a partir de datos de la aplicación. Ver la última diapositivas de speakerdeck.com/vjeux/react-css-in-js, como se mencionan a continuación
    • Seguro, si el componente es un elemento único, pero dado <div><a>foo <b>bar</b></a><table>...</table></div> cómo hacer que el estilo que a partir de utilería? Tenga en cuenta que la estructura html, debe seguir siendo un detalle de implementación, o bien se pierde mucho el beneficio componentes.
    • Ofreciendo más accesorios en el componente de la «API» para las cosas que usted desea permitir que alguien de estilo y entregarlos a la parte pertinente del HTML? O mediante la documentación de un complejo de estilo de objeto que el componente aceptará que usted va a separar internamente? Que no requiere de exponer la estructura del HTML, como puede ser semántico acerca de él.

  5. 8

    Lo que yo hago es darle a cada uno de mis componentes reutilizables una costumbre única nombre del elemento y, a continuación, crear un archivo css para ese componente, específicamente, con todas las opciones de estilo para que el componente (y sólo para ese componente).

    var MyDiv = React.createClass({
      render: function() {
        return <custom-component style={style}> Have a good and productive day! </custom-component>;
      }
    });

    Y en el archivo ‘personalizado-componente.css’, cada entrada se iniciará con la costumbre-componente de la etiqueta:

    custom-component { 
       display: block; /* have it work as a div */
       color: 'white'; 
       fontSize: 200; 
    } 
    custom-component h1 { 
      font-size: 1.4em; 
    }

    Que significa que usted no pierda la crítica de la noción de separación de preocupación. Vista vs estilo. Si usted comparte su componente, es más fácil para los demás el tema es para que coincida con el resto de su página web.

    • Esta es la forma en que yo lo hago. El único aspecto negativo es que se trata de dos archivos en lugar de uno. Yo puedo vivir con eso.
  6. 8

    Estilo en JSX es muy similar a la de estilo en HTML.

    HTML Caso:

    div style=»background-color: rojo; color: blanco»

    JSX Caso:

    div style={{ backgroundColor: ‘rojo’, color: blanco’ }}

  7. 5

    Es realmente depende de cómo gran de la aplicación, si quieres usar preparadores como webpack y paquete de CSS y JS juntos en la construcción y cómo quieres gestionar tu flujo de aplicación! Al final del día, depende de su situación, usted puede tomar la decisión!

    Mi preferencia para la organización de archivos en los grandes proyectos que se van a separar CSS y JS archivos, podría ser más fácil de compartir, más fácil para la interfaz de usuario a la gente a ir a través de los archivos CSS, también es mucho más prolijo archivo de la organización para toda la aplicación!

    Siempre pensar de esta manera, asegúrese de que en la fase de desarrollo de todo están donde deberían estar, llamado correctamente y ser fácil para los desarrolladores para encontrar las cosas…

    Yo personalmente la combinación de ellos depende de mi necesidad, por ejemplo…
    Trate de usar css externo, pero si es necesario Reaccionar aceptará estilo, usted tiene que pasar como un objeto con el valor de la clave, algo como esto a continuación:

    import React from 'react';
    
    const App = props => {
      return (
        <div className="app" style={{background: 'red', color: 'white'}}>  /*<<<<look at style here*/
          Hello World...
        </div>
      )
    }
    
    export default App;
  8. 4

    Aquí es el booleano, basado en un estilo JSX sintaxis:

    style={{display: this.state.isShowing ? "inherit" : "none"}}
  9. 3

    Generalmente tengo secs archivo asociado a cada Reaccionar componente. Pero, no veo razón por la que no comprenden el componente con la lógica y la mirada en ella. Quiero decir, usted tiene algo similar con componentes web.

  10. 3

    Dependiendo de su configuración en línea del peinado puede ofrecer Caliente de recarga. La página web es inmediatamente vuelve a presentar cada vez los cambios de estilo. Esto me ayuda a desarrollar los componentes más rápido. Habiendo dicho eso, estoy seguro de que usted puede configurar una bañera de recarga de medio ambiente para CSS + SECS.

  11. 3

    Puede utilizar estilos en línea, pero usted tendrá algunas limitaciones si se utiliza en todos sus estilos, algunas de las limitaciones son que usted no puede usar CSS pseudo selectores y consultas de medios de comunicación allí.

    Puede utilizar Radio para resolver esto, pero aún así, siento que tiene el proyecto crece su va a conseguir engorroso.

    Me gustaría recomendar el uso de Módulos CSS.

    utilizando Módulos CSS usted tiene la libertad de escribir CSS en el archivo CSS y no tiene que preocuparse acerca de la nomenclatura de los enfrentamientos, será atendido por Módulos CSS.

    Una ventaja de este método es que se le da funcionalidad de estilo a un componente específico. Esto creará mucho más fácil de mantener el código de la lectura del proyecto de arquitectura para la próxima desarrollador para trabajar en su proyecto.

  12. 3

    Para algunos de los componentes, es más fácil utilizar estilos en línea. También, me resulta más fácil y más concisa (como yo lo estoy usando Javascript y CSS no) para animar estilos de componentes.

    Para stand-alone componentes, yo uso el «margen Operador’ o ‘…’. Para mí, está claro, hermoso, y trabaja en un espacio reducido. Aquí es un poco de la carga de la animación que hice para mostrar beneficios:

    <div style={{...this.styles.container, ...this.state.opacity}}>
    <div style={{...this.state.colors[0], ...this.styles.block}}/>
    <div style={{...this.state.colors[1], ...this.styles.block}}/>
    <div style={{...this.state.colors[2], ...this.styles.block}}/>
    <div style={{...this.state.colors[7], ...this.styles.block}}/>
    <div style={{...this.styles.block}}/>
    <div style={{...this.state.colors[3], ...this.styles.block}}/>
    <div style={{...this.state.colors[6], ...this.styles.block}}/>
    <div style={{...this.state.colors[5], ...this.styles.block}}/>
    <div style={{...this.state.colors[4], ...this.styles.block}}/>
    </div>
    this.styles = {
    container: {
    'display': 'flex',
    'flexDirection': 'row',
    'justifyContent': 'center',
    'alignItems': 'center',
    'flexWrap': 'wrap',
    'width': 21,
    'height': 21,
    'borderRadius': '50%'
    },
    block: {
    'width': 7,
    'height': 7,
    'borderRadius': '50%',
    }
    }
    this.state = {
    colors: [
    { backgroundColor: 'red'},
    { backgroundColor: 'blue'},
    { backgroundColor: 'yellow'},
    { backgroundColor: 'green'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    ],
    opacity: {
    'opacity': 0
    }
    }

    EDICIÓN DE NOVIEMBRE DE 2019

    De trabajo en la industria (Una compañía Fortune 500), NO estoy autorizado para hacer cualquier inline estilo. En nuestro equipo, hemos decidido que de estilo en línea son ilegibles y no sostenible. Y, después de haber visto de primera mano cómo los estilos en línea hacer en apoyo de una solicitud completamente intolerable, yo tendría que estar de acuerdo. Estoy completamente de desalentar a los estilos en línea.

  13. 2

    El problema con los estilos en línea es el Contenido de las Políticas de Seguridad (CSP) se están volviendo más comunes, que no te lo permitan. Por lo tanto, recomiendo evitar los estilos en línea completamente.

    Actualización:
    Para explicar aún más, CSP son encabezados HTTP enviado por el servidor que restringir el contenido que puede aparecer en la página. Es simplemente una más de mitigación que pueden ser aplicadas a un servidor para detener a un atacante de hacer algo travieso si el desarrollador de código en el sitio mal.

    El propósito de la mayoría de estas restricciones es dejar de XSS (cross-site scripting) ataques. XSS es donde un atacante descubre una manera de incluir su propio javascript en su página (por ejemplo, si yo pongo mi nombre de usuario bob<SCRIPT>alert("hello")</SCRIPT> y, a continuación, publicar un comentario, y que visita la página, no debería mostrar una alerta). Los desarrolladores deben negar la capacidad de tener un usuario para agregar contenido como este en el sitio, pero sólo en el caso de cometer un error, CSP bloques de la carga de la página si se encuentra cualquier script> etiquetas.

    CSP son sólo un nivel adicional de protección para los desarrolladores para asegurarse de si se cometió un error, que un atacante no puede causar problemas para los visitantes de ese sitio.

    Para que todos se XSS, pero ¿y si el atacante no puede incluir <script> las etiquetas, pero puede incluir <style> etiquetas o incluir un style= parámetro en una etiqueta? Entonces él podría ser capaz de cambiar la apariencia del sitio de tal manera que estás engañado a hacer clic en el botón equivocado, o algún otro problema. Esto es mucho menos de una preocupación, pero aún así algo a evitar, y CSP hace por ti.

    Un buen recurso para las pruebas de un sitio para el CSP es https://securityheaders.io/

    Usted puede leer más acerca de CSP en: http://www.html5rocks.com/en/tutorials/security/content-security-policy/

    • ¿Puedes explicar un poco más?
    • Usted se está refiriendo específicamente a la unsafe-inline política. Esta política permite que la restricción de un elemento de estilo <style> no a los estilos aplicados a un elemento del atributo style: <div style="">. Dado que la pregunta anterior se refiere al atributo de estilo, que esto parece un mal consejo para evitar estilos en línea por completo. También, react es asesorar a mover todos los CSS en JS: github.com/reactjs/react-future/blob/master/04%20-%20Layout/…
    • Creo que ambos <style> y <div style=""> son bloqueados por el CSP predeterminado de la política cuando se habilita CSP. Un ejemplo de github.com/blog/1477-content-security-policy, se muestra cómo el uso común de estilo en línea <div class="tab" style="display:none"></div> está bloqueado y estaría mejor escrito como <div class="tab"></div> a cuenta para CSP. Suponiendo que mi comprensión de la CSP es correcta, y la gente puede ser propicio CSP en los servidores, creo que es útil consejo. Si o no el CSP de estilos en línea es bueno, es otro tema.
    • que link era realmente grande, posiblemente digno de su propia respuesta
    • totalmente de acuerdo con eye_mew. Post que enlace como respuesta.
    • Por desgracia, @eye_mew y @Sam-Rad – @potench ‘s respuesta no es correcta. CSP unsafe-inline desactiva todas las formas de estilos en línea, incluyendo en el atributo de estilo. Mediante programación puede utilizar el estilo de la Api en un elemento a través de JS (por ejemplo,elem.style.color = 'blue';), pero que no se puede establecer el estilo de atributo de un elemento (como 'unsafe-inline' en el script src directiva no permite en línea de etiquetas de secuencia de comandos, pero también onclick atributos y amigos).
    • Hay más información en el Facebook del equipo sobre cómo se aplican los estilos con respecto a la CSP en Reaccionar v15 github.com/facebook/react/issues/5878. Vale la pena leerlo

  14. 2

    Comparar a escribir sus estilos en un archivo css, Reaccionar el atributo de estilo tiene las siguientes ventajas:

    1. La capacidad para utilizar las herramientas de javascript como un lenguaje de programación proporciona para controlar el estilo de sus elementos. Esto incluye la incrustación de las variables, condiciones de uso, y de paso estilos a un niño de componentes.
    2. Un «la» enfoque. No más separación de de HTML, JS y CSS en el código escrito para el componente. Código del componente que está consolidado, y escrito en un solo lugar.

    Sin embargo, la Reaccionar el atributo de estilo viene con un par de inconvenientes – usted no puede

    1. No se puede utilizar consultas de medios de comunicación
    2. No se puede utilizar el pseudo selectores,
    3. menos eficiente en comparación con las clases CSS.

    El uso de CSS en JS, usted puede conseguir todas las ventajas de un estilo de etiqueta, sin los inconvenientes. A partir de hoy hay un par de bien popular css compatibles en js-bibliotecas, incluyendo: la Emoción, Estilo de los Componentes, y el Radio. Las bibliotecas son para css tipo de lo Reaccionar es HTML. Ellos le permiten escribir el código CSS y el control de la CSS en el código JS.

    vamos a comparar cómo nuestro código buscará estilo de un elemento simple. Vamos a estilo de un «hola mundo» div lo que demuestra la gran escritorio, y más pequeños en el móvil.

    Utilizando el atributo style

    return (
    <div style={{fontSize:24}} className="hello-world">
    Hello world
    </div>
    )

    Desde la consulta de medios de comunicación no es posible en un estilo de etiqueta, vamos a añadir un nombre de clase para el elemento y añadir una regla css.

    @media screen and (max-width: 700px){
    .hello-world {
    font-size: 16px; 
    }
    }

    Con la Emoción del 10 css etiqueta

    return (
    <div
    css={{
    fontSize: 24, 
    [CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY]:{
    fontSize: 16 
    }
    }
    >
    Hello world
    </div>
    )

    Emoción también soporta cadenas de plantillas, así como el estilo de los componentes. Así que si usted lo prefiere, puede escribir:

    return (
    <Box>
    Hello world
    </Box>
    )
    const Box = styled.div`
    font-size: 24px; 
    ${CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY}{
    font-size: 16px; 
    }
    `

    Detrás de las capuchas «Css JS» los usos de clases css. La emoción fue, específicamente, construir con el rendimiento en mente, y utiliza el almacenamiento en caché. En comparación a Reaccionar los atributos de estilo Css JS proporcionará un mejor rendimiento.

    Mejores Prácticas

    Aquí están algunas de las mejores prácticas recomiendo:

    1. Si usted desea que el estilo de sus elementos en línea, o en su JS, usar un css-en-js de la biblioteca, no utilice un atributo de estilo.

    Debería ser el objetivo de hacer todo el estilo de esta manera, y no tienen los estilos en todos los especificados en mi archivo CSS?

    1. Si utiliza un css-en-js solución no es necesario escribir los estilos en los archivos Css. Escribiendo tu css en JS es superior como usted puede utilizar todas las herramientas de un lenguaje de programación como JS proporciona.

    debo evitar estilos en línea completamente?

    1. La estructuración de su código de estilo en JS es bastante similar a la estructuración de su código en general. Por ejemplo:
      • reconocer los estilos que se repiten, y escribirlas en un solo lugar. Hay dos maneras de hacer esto en la Emoción:
    //option 1 - Write common styles in CONSTANT variables
    //styles.js
    export const COMMON_STYLES = {
    BUTTON: css`
    background-color: blue; 
    color: white; 
    :hover {
    background-color: dark-blue; 
    }
    `
    }
    //SomeButton.js
    const SomeButton = (props) => {
    ...
    return (
    <button
    css={COMMON_STYLES.BUTTON}
    ...
    >
    Click Me
    </button>
    )
    }
    //Option 2 - Write your common styles in a dedicated component 
    const Button = styled.button`
    background-color: blue; 
    color: white; 
    :hover {
    background-color: dark-blue; 
    }   
    `
    const SomeButton = (props) => {
    ...
    return (
    <Button ...> 
    Click me
    </Button>
    )
    }
    
    • Reaccionar patrón de codificación es de encapsulado de componentes – HTML y JS que controla un componente está escrito en un archivo. Que es donde tu css/código de estilo a estilo componente que pertenece.

    • Cuando sea necesario, agregar un estilo a la proposición de su componente. De esta manera usted puede reutilizar el código y estilo escrito en un componente hijo, y personalizarlo a sus necesidades específicas por el componente de los padres.

    const Button = styled.button([COMMON_STYLES.BUTTON, props=>props.stl])
    const SmallButton = (props)=>(
    <Button 
    ...
    stl={css`font-size: 12px`}
    >
    Click me if you can see me
    </Button>
    )
    const BigButton = (props) => (
    <Button
    ...
    stl={css`font-size: 30px;`}
    >
    Click me
    </Button>
    )
  15. 2

    Puede utilizar StrCSS así, se crea aislado nombres de clases y mucho más! Ejemplo de código se vería. Usted puede (opcional) instale el VSCode extensión de Visual Studio de Mercado para el resaltado de sintaxis apoyo!

    fuente: strcss

    import { Sheet } from "strcss";
    import React, { Component } from "react";
    const sheet = new Sheet(`
    map button
    color green
    color red !ios
    fontSize 16
    on hover
    opacity .5
    at mobile
    fontSize 10
    `);
    export class User extends Component {
    render() {
    return <div className={sheet.map.button}>
    {"Look mom, I'm green!
    Unless you're on iOS..."}
    </div>;
    }
    }
  16. 0

    Algún tiempo que requerimos para el estilo de algunos de los elementos de un componente, pero si tenemos que mostrar que el componente único ni el estilo es lo de menos, a continuación, en lugar de utilizar la clase CSS vamos a por los de estilo en línea en reaccionar js. reactjs de estilo en línea es el mismo que el HTML de estilo en línea sólo los nombres de propiedad son un poco diferentes

    Escribir su estilo en cualquier etiqueta con estilo={{prop:»valor»}}

    import React, { Component } from "react";
    import { Redirect } from "react-router";
    class InlineStyle extends Component {
    constructor(props) {
    super(props);
    this.state = {};
    }
    render() {
    return (
    <div>
    <div>
    <div
    style={{
    color: "red",
    fontSize: 40,
    background: "green"
    }}//this is inline style in reactjs
    >
    </div>
    </div>
    </div>
    );
    }
    }
    export default InlineStyle;
    • Podría usted por favor, añadir un poco más de información acerca de como y porque este código proporciona una respuesta a la OP de la pregunta? Gracias!

Dejar respuesta

Please enter your comment!
Please enter your name here