Mejores prácticas de estilo en línea de React.js

512

Soy consciente de que puede especificar estilos dentro de las clases React, 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 apuntar a hacer todo el estilo de esta manera y no tener estilos especificados en mi archivo CSS?

¿O debería evitar los estilos en línea por completo?

Parece extraño y desordenado hacer un poco de ambos: dos lugares tendrían que verificarse al ajustar el estilo.

eye_mew
fuente
Puede usar react-theme para organizar sus estilos en línea y hacerlos fácilmente personalizables cuando esté creando un componente reutilizable. Funciona de manera similar a ThemeManager en material-ui .
mantramantramantra
66
Considere usar github.com/css-modules/css-modules . github.com/gajus/react-css-modules es una implementación de React (de la que soy autor). Los módulos CSS y los módulos React CSS asignan automáticamente los nombres de las clases de componentes a los módulos CSS a los que se les asigna un nombre único en el alcance del documento.
Gajus
1
Yo uso CSS mientras tengo que escribir consultas de medios. También uso clases de una biblioteca CSS básica como bootstrap.
vijayst
Por lo general, no se recomienda usar el atributo de estilo como el medio principal de los elementos de estilo. ( reactjs.org/docs/dom-elements.html#style )
Omid Ebrahimi
A partir de hoy, recomiendo usar una solución css-in-js. Tiene todas las ventajas del atributo de estilo, sin los inconvenientes. Escribí una respuesta stackoverflow.com/questions/26882177/…
Ben Carp

Respuestas:

463

Todavía no hay muchas "Mejores prácticas". Aquellos de nosotros que estamos usando estilos en línea, para componentes React, todavía estamos experimentando mucho.

Hay varios enfoques que varían enormemente: Reaccione la tabla de comparación de lib en línea

¿Todo o nada?

Lo que llamamos "estilo" en realidad incluye algunos conceptos:

  • Diseño: cómo se ve un elemento / componente en relación con otros
  • Apariencia: las características de un elemento / componente
  • Comportamiento y estado: cómo se ve un elemento / componente en un estado dado

Comience con estilos de estado

React ya está administrando el estado de sus componentes, esto hace que los estilos de estado y comportamiento un ajuste natural para la colocación con la lógica de sus componentes.

En lugar de crear componentes para renderizar con clases de estado condicionales, considere agregar estilos de estado 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 : {}} />

Tenga en cuenta que estamos usando una clase para diseñar la apariencia, pero ya no usamos ninguna .is-clase prefijada para estado y el comportamiento .

Podemos usar Object.assign(ES6) o _.extend(subrayado / lodash) para agregar soporte para múltiples estados:

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

Personalización y reutilización

Ahora que lo estamos usando Object.assignse vuelve muy simple hacer que nuestro componente sea reutilizable con diferentes estilos. Si queremos anular los estilos por defecto, podemos hacerlo en la llamada in situ con los apoyos, así: <TodoItem dueStyle={ fontWeight: "bold" } />. Implementado así:

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

Diseño

Personalmente, no veo una razón convincente para los estilos de diseño en línea. Hay una serie de excelentes sistemas de diseño CSS por ahí. Solo usaría uno.

Dicho esto, no agregue estilos de diseño directamente a su componente. Envuelva sus componentes con componentes de diseño. Aquí hay 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 soporte de diseño, a menudo trato de diseñar componentes para ser 100% widthy height.

Apariencia

Esta es el área más polémica del debate del "estilo en línea". En última instancia, depende del componente que diseñe y la comodidad de su equipo con JavaScript.

Una cosa es segura, necesitará la ayuda de una biblioteca. Estados del navegador ( :hover,:focus ) y las consultas de medios son dolorosos en React sin procesar.

Me gusta el radio porque la sintaxis de esas partes duras está diseñada para modelar la de SASS.

Organización del código

A menudo verá un objeto de estilo fuera del módulo. Para un componente de lista de tareas, podría verse así:

var styles = {
  root: {
    display: "block"
  },
  item: {
    color: "black"

    complete: {
      textDecoration: "line-through"
    },

    due: {
      color: "red"
    }
  },
}

funciones getter

Agregar un montón de lógica de estilo a su plantilla puede ser un poco complicado (como se ve arriba). Me gusta crear funciones getter para calcular 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>
  }
});

Mirando más

Discutí todo esto con más detalle en React Europe a principios de este año: Estilos en línea y cuándo es mejor 'usar CSS' .

Estoy feliz de ayudarlo mientras hace nuevos descubrimientos en el camino :) Dame un golpe -> @chantastic

fantastico
fuente
10
Gran lectura También aprecié mucho esta charla relevante tuya, @chantastic. #accepted
eye_mew
55
"Envuelva sus componentes con componentes de diseño": tan obvio, pero exactamente lo que necesitaba.
tandrewnichols
2
@ fantástica gran respuesta. Un año después, ¿sigue siendo cierto? Solo realmente me metí en React y en la idea del estilo en línea, y me pregunté si algo ha cambiado desde que publicaste esta respuesta.
alexrussell
44
@alexrussell gracias! Creo que la respuesta aquí todavía se mantiene bastante bien. La única área que ha cambiado es que Afrodita parece ser la biblioteca de estilo en línea preferida por la comunidad (sobre Radium), aunque en realidad es una cuestión de preferencia personal.
fantástico
2
@alexrussell oops. enviado accidentalmente temprano. Ahora utilizo esta técnica de componentes para diseñar mis componentes. La idea es bastante simple. crear componentes que sólo se ocupan de la aplicación de estilo y componer con ellos, en lugar de div, span, a, etc que ayudará a mantener el estilo aislado independientemente de la biblioteca que utiliza. componente reactpatterns.com/#Style
fantástico
135

El atributo de estilo en React espera que el valor sea un objeto, es decir, un par de valores clave.

style = {}tendrá otro objeto dentro {float:'right'}para que funcione.

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

Espero que esto resuelva el problema

anandharshan
fuente
3
Entonces, ¿cómo usar la consulta de medios para el mismo si quiero usar las clases css en el archivo JS
Pardeep Jain
@PardeepJain Una forma es usar Emotion, aquí hay una conferencia completa si estás interesado en la cumbre meet.js 2018
Bruno Finger el
Una desventaja de este enfoque es que definir estilos en línea crea un nuevo objeto cada vez. Esto crea una diferencia en el styleaccesorio que podría conducir a problemas de rendimiento. Por lo menos, defina un estilo constante como este fuera de su render. ¡Espero que esto ayude!
Dawson B
49

Uso estilos en línea ampliamente dentro de mis componentes React. Me resulta mucho más claro colocar estilos dentro de los componentes porque siempre está claro qué estilos tiene y no tiene el componente. Además, tener todo el poder de Javascript a mano realmente simplifica las necesidades de diseño más complejas.

Al principio no estaba convencido, pero después de incursionar en ello durante varios meses, estoy completamente convertido y estoy en proceso de convertir todo mi CSS a métodos CSS en línea u otros métodos CSS.

Esta presentación del empleado de Facebook y colaborador de React "vjeux" también es realmente útil: https://speakerdeck.com/vjeux/react-css-in-js

Kyle Mathews
fuente
55
¿Cómo voy a hacer diseños receptivos con estilos en línea? No tiene la opción para consultas de medios aquí.
Zeus
Obtiene el poder de js, js puede detectar tamaños de navegador para construir estilos dinámicamente.
JordyvD
3
@ g3mini ese no es un enfoque recomendado ahora, de todos modos, ya que hay soluciones mucho más poderosas para diseñar componentes como CSS Modules, styled-componentsy otros.
Denialos
Hay css en js también =) Sin embargo, prefiero usar módulos CSS por el momento.
JordyvD
Una cosa que no se considera aquí es que es muy fácil ver los estilos padre e hijo en el mismo archivo SASS, mientras que si necesita ver las reglas en diferentes componentes, es posible que deba abrir y cerrar muchos archivos.
Ringo
23

El propósito principal del atributo de estilo es para estilos dinámicos basados ​​en estado. Por ejemplo, podría tener un estilo de ancho en una barra de progreso basado en algún estado, o la posición o visibilidad basada en otra cosa.

Los estilos en JS imponen la limitación de que la aplicación no puede proporcionar un estilo personalizado para un componente reutilizable. Esto es perfectamente aceptable en las situaciones mencionadas anteriormente, pero no cuando cambia las características visibles, especialmente el color.

Bandido
fuente
Una idea relacionada que tuvimos durante algún tiempo es la capacidad de aislar reglas CSS específicas para un componente React usando gulp y LESS. Algo así como establecer un className específico para cada componente, luego agregar CSS específico para esa clase dentro del archivo del componente. Esto tendría mucho sentido.
David Hellsing
A menudo uso los nombres de clase en el formato de "componente- {aplicación} - {componentName}". "{app}" podría ser el nombre de la aplicación o "común" para los componentes independientes de la aplicación. por ejemplo, "component-foo-todo-list" para TodoList y "component-common-light-switch-toggle". Para los componentes empaquetados, {app} sería el nombre npm. ¿A eso te refieres?
Brigante
Sí, bueno, la convención de nomenclatura es una cosa, pero lo principal sería agregar reglas CSS aisladas en el mismo archivo js de componente.
David Hellsing
2
Esto no es verdad. Definitivamente puede aplicar un estilo personalizado para reaccionar componentes. El componente solo necesita fusionar su propio objeto de estilo con un objeto entregado desde arriba, que puede provenir de los datos de la aplicación. Vea las últimas diapositivas de speakerdeck.com/vjeux/react-css-in-js como se menciona a continuación
Flion
Claro, si su componente es un elemento único, pero dado <div><a>foo <b>bar</b></a><table>...</table></div>¿cómo lo diseña desde los accesorios? Tenga en cuenta que la estructura html debe seguir siendo un detalle de implementación, de lo contrario, perderá muchos de los componentes de beneficios que brindan.
Brigante
18

James K Nelson, en su carta "Por qué no debe aplicar estilo a los componentes de reacción con JavaScript", afirma que en realidad no es necesario utilizar estilos en línea con sus desventajas. Su afirmación es que el viejo y aburrido CSS con menos / scss es la mejor solución. La parte de sus tesis a favor de css:

  • extensible externamente
  • nivelable (los estilos en línea sobrepasan todo)
  • amigable con el diseñador
alex_1948511
fuente
10

El estilo en JSX es muy similar al estilo en HTML.

Caso HTML:

div style = "color de fondo: rojo; color: blanco"

Caso JSX:

div style = {{backgroundColor: 'red', color: 'white'}}

Vivek Mehta
fuente
8

Lo que hago es dar a cada uno de mis componentes reutilizables un nombre de elemento personalizado único y luego crear un archivo CSS para ese componente, específicamente, con todas las opciones de estilo para ese componente (y solo 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 'custom-component.css', cada entrada comenzará con la etiqueta de componente personalizado:

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

Eso significa que no pierde la noción crítica de separación de la preocupación. Ver vs estilo. Si comparte su componente, es más fácil que otros le asignen un tema para que coincida con el resto de su página web.

widged
fuente
Así es como lo hago. El único inconveniente es que son dos archivos en lugar de uno. Puedo vivir con ello.
Salsa
5

Realmente depende de qué tan grande sea su aplicación, si desea usar paquetes como webpack y agrupar CSS y JS en la compilación y cómo quiere administrar el flujo de su aplicación. Al final del día, depende de tu situación, ¡puedes tomar una decisión!

Mi preferencia por organizar archivos en grandes proyectos es separar CSS y JS archivos , podría ser más fácil de compartir, más fácil para las personas de la interfaz de usuario simplemente pasar por los archivos CSS, ¡también una organización de archivos mucho más ordenada para toda la aplicación!

Siempre piense de esta manera, asegúrese de que en la fase de desarrollo todo esté donde debe estar, con un nombre adecuado y que sea fácil para otros desarrolladores encontrar cosas ...

Personalmente, los mezclo depende de mi necesidad, por ejemplo ... Intente usar CSS externo, pero si es necesario, React también aceptará el estilo, debe pasarlo como un objeto con valor 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;
Alireza
fuente
5

Aquí está el estilo booleano basado en la sintaxis JSX :

style={{display: this.state.isShowing ? "inherit" : "none"}}
Anupam Maurya
fuente
3

Por lo general, tengo un archivo scss asociado a cada componente React. Pero, no veo la razón por la cual no encapsularía el componente con lógica y lo miraría. Quiero decir, tienes algo similar con los componentes web.

dakt
fuente
3

Dependiendo de su configuración, el estilo en línea puede ofrecerle una recarga en caliente. La página web se vuelve a representar inmediatamente cada vez que cambia el estilo. Esto me ayuda a desarrollar componentes más rápido. Dicho esto, estoy seguro de que puede configurar un entorno de recarga en caliente para CSS + SCSS.

Chico
fuente
3

Puede usar estilos en línea, pero tendrá algunas limitaciones si los usa en todos sus estilos, algunas limitaciones conocidas son que no puede usar pseudo-selectores CSS y consultas de medios allí.

Puedes usar radio para resolver esto, pero aún así, creo que si el proyecto crece, se volverá engorroso.

Recomendaría usar módulos CSS .

Al usar los módulos CSS , tendrá la libertad de escribir CSS en un archivo CSS y no tendrá que preocuparse por los conflictos de nombres, los módulos CSS se ocuparán de ello.

Una ventaja de este método es que le brinda funcionalidad de estilo al componente específico. Esto creará un código mucho más fácil de mantener y una arquitectura de proyecto legible para que el próximo desarrollador trabaje en su proyecto.

Praveen Rao Chavan.G
fuente
3

Para algunos componentes, es más fácil usar estilos en línea. Además, me resulta más fácil y conciso (ya que estoy usando Javascript y no CSS) para animar estilos de componentes.

Para componentes independientes, utilizo el 'Operador de propagación' o el '...'. Para mí, es claro, hermoso y funciona en un espacio reducido. Aquí hay una pequeña animación de carga que hice para mostrar sus 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
  }
}

EDITAR NOVIEMBRE 2019

Al trabajar en la industria (una compañía Fortune 500), NO se me permite hacer ningún estilo en línea. En nuestro equipo, hemos decidido que el estilo en línea no se puede leer y no se puede mantener. Y, después de haber visto de primera mano cómo los estilos en línea hacen que soportar una aplicación sea completamente intolerable, tendría que estar de acuerdo. Desaliento completamente los estilos en línea.

VocoJax
fuente
2

El problema con los estilos en línea es que las Políticas de seguridad de contenido (CSP) se están volviendo más comunes, lo que no lo permite. Por lo tanto, recomiendo evitar los estilos en línea por completo.

Actualización: para explicar más, los CSP son encabezados HTTP enviados por el servidor que restringen el contenido que puede aparecer en la página. Es simplemente una mitigación adicional que se puede aplicar a un servidor para evitar que un atacante haga algo malo si el desarrollador codifica mal el sitio.

El propósito de la mayoría de estas restricciones es detener los ataques XSS (cross-site scripting). XSS es donde un atacante descubre una manera de incluir su propio javascript en su página (por ejemplo, si hago mi nombre de usuario bob<SCRIPT>alert("hello")</SCRIPT>y luego publico un comentario, y usted visita la página, no debería mostrar una alerta). Los desarrolladores deben negar la posibilidad de que un usuario agregue contenido como este al sitio, pero en caso de que cometieran un error, CSP bloquea la carga de la página si encuentra alguna script>etiqueta.

Los CSP son solo un nivel adicional de protección para que los desarrolladores se aseguren de que si cometieron un error, un atacante no puede causar problemas a los visitantes de ese sitio.

De modo que todo es XSS, pero ¿y si el atacante no puede incluir <script>etiquetas pero puede incluir <style>etiquetas o incluir unstyle= parámetro en una etiqueta? Entonces él podría cambiar el aspecto del sitio de tal manera que te engañen para que hagas clic en el botón incorrecto o algún otro problema. Esto es mucho menos preocupante, pero aún así es algo que debe evitarse, y CSP lo hace por usted.

Un buen recurso para probar un sitio para CSP es https://securityheaders.io/

Puede leer más sobre CSP en: http://www.html5rocks.com/en/tutorials/security/content-security-policy/

0xdabbad00
fuente
¿Puedes explicar un poco más?
Dmitry Manannikov
8
Te refieres específicamente a la unsafe-inlinepolítica. Esta política permite la restricción de un elemento de estilo <style>no a los estilos en línea aplicados al atributo de estilo de un elemento: <div style="">. Dado que la pregunta anterior se refiere al atributo de estilo, esto parece un mal consejo para evitar completamente los estilos en línea. Además, reactaconseja mover todos los CSS a JS: github.com/reactjs/react-future/blob/master/04%20-%20Layout/…
potench el
1
@potench ese enlace fue realmente genial, posiblemente digno de su propia respuesta
eye_mew
66
Desafortunadamente, @eye_mew y @ Sam-Rad: la respuesta de @potench no es correcta. CSP unsafe-inlinedesactiva todas las formas de estilos en línea, incluido el atributo de estilo. Puede usar mediante programación las API de estilo en un elemento a través de JS (p elem.style.color = 'blue';. Ej. ), Pero no puede establecer el atributo de estilo en un elemento (al igual que 'unsafe-inline'en la directiva script-src, no se permiten etiquetas de script en línea, sino también onclickatributos y amigos)
Alex Sexton
2
Hay más información del equipo de Facebook sobre cómo se aplican los estilos con respecto a CSP en React v15 github.com/facebook/react/issues/5878 . Vale la pena leerlo
Mark Lundin
2

En comparación con la escritura de sus estilos en un archivo CSS, el atributo de estilo de React tiene las siguientes ventajas :

  1. La capacidad de utilizar las herramientas javascript como lenguaje de programación permite controlar el estilo de sus elementos. Esto incluye incrustar variables, usar condiciones y pasar estilos a un componente secundario.
  2. Un enfoque "componente". No más separación de código HTML, JS y CSS escrito para el componente. El código del componente se consolida y se escribe en un solo lugar.

Sin embargo, el atributo de estilo de React viene con algunos inconvenientes : no puedes

  1. No se pueden usar consultas de medios
  2. No se pueden usar pseudo-selectores,
  3. menos eficiente en comparación con las clases de CSS.

Al usar CSS en JS, puede obtener todas las ventajas de una etiqueta de estilo, sin esos inconvenientes . A partir de hoy, hay algunos css populares y bien soportados en las bibliotecas js, que incluyen: Emotion, Styled-Components y Radium. Esas bibliotecas son como CSS lo que React es para HTML. Le permiten escribir su CSS y controlar su CSS en su código JS.

comparemos cómo se verá nuestro código para diseñar un elemento simple. Vamos a diseñar un div "hello world" para que se vea grande en el escritorio y más pequeño en el móvil.

Usando el atributo de estilo

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

Dado que la consulta de medios no es posible en una etiqueta de estilo, tendremos que agregar un className al elemento y agregar una regla css.

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

Usando la etiqueta 10 css de Emotion

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

Emotion también admite cadenas de plantillas, así como componentes con estilo. Entonces, si 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 campanas "Css en JS" utiliza clases css. La emoción específicamente se creó teniendo en cuenta el rendimiento y utiliza el almacenamiento en caché. En comparación con los atributos de estilo React, Css en JS proporcionará un mejor rendimiento.

Mejores prácticas

Aquí hay algunas mejores prácticas que recomiendo:

  1. Si desea diseñar sus elementos en línea, o en su JS, use una biblioteca css-in-js, no use un atributo de estilo.

¿Debería apuntar a hacer todo el estilo de esta manera y no tener estilos especificados en mi archivo CSS?

  1. Si usa una solución css-in-js no hay necesidad de escribir estilos en archivos Css. Escribir su CSS en JS es superior, ya que puede utilizar todas las herramientas que proporciona un lenguaje de programación como JS.

¿Debo evitar los estilos en línea por completo?

  1. Estructurar su código de estilo en JS es bastante similar a estructurar su código en general. Por ejemplo:
    • reconocer estilos que se repiten y escribirlos en un solo lugar. Hay dos formas de hacer esto en Emotion:
// 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>
   )
}
  • El patrón de codificación de reacción es de componentes encapsulados: HTML y JS que controlan un componente se escriben en un archivo. Ahí es donde pertenece su código CSS / estilo para diseñar ese componente.

  • Cuando sea necesario, agregue un accesorio de estilo a su componente. De esta forma, puede reutilizar el código y el estilo escritos en un componente secundario y personalizarlo según sus necesidades específicas según el componente principal.

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>
)
Ben Carp
fuente
2

¡También puedes usar StrCSS, crea nombres de clase aislados y mucho más! Se vería un código de ejemplo. ¡Puede (opcional) instalar la extensión VSCode desde Visual Studio Marketplace para obtener soporte de resaltado de sintaxis!

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>;
  }
}
Jeffrey Lanters
fuente
1

En algún momento necesitamos diseñar un elemento de un componente, pero si tenemos que mostrar solo ese componente o si el estilo es tan pequeño, en lugar de usar la clase CSS, buscamos el estilo en línea en react js. el estilo en línea de reactjs es igual al estilo en línea de HTML, solo que los nombres de las propiedades son un poco diferentes

Escriba su estilo en cualquier etiqueta usando style = {{prop: "value"}}

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;
ABHIJEET KHIRE
fuente
¿Podría agregar más información sobre cómo y por qué este código proporciona una respuesta a la pregunta de OP? ¡Gracias!
deHaar el
1

Actualización 2020: la mejor práctica es usar una biblioteca que ya haya hecho el trabajo duro por usted y no mate a su equipo cuando realiza el cambio como se señala en la respuesta originalmente aceptada en este video (aún es relevante). También solo para tener una idea de las tendencias, este es un gráfico muy útil . Después de hacer mi propia investigación sobre esto, elegí utilizar Emotion para mis nuevos proyectos y ha demostrado ser muy flexible y escalable.

Dado que la respuesta más votada de 2015 recomendó Radium, que ahora está relegado al modo de mantenimiento . Por lo tanto, parece razonable agregar una lista de alternativas. La publicación que discontinúa Radium sugiere algunas bibliotecas. Cada uno de los sitios vinculados tiene ejemplos disponibles, por lo que me abstendré de copiar y pegar el código aquí.

  • La emoción que está "inspirada en" componentes de estilo entre otros, usa estilos en js y puede ser independiente del marco, pero definitivamente promueve su biblioteca React. La emoción se ha mantenido actualizada a partir de esta publicación.
  • los componentes con estilo son comparables y ofrecen muchas de las mismas características que Emotion. También se mantiene activamente. Tanto Emotion como los componentes con estilo tienen una sintaxis similar. Está construido específicamente para trabajar con componentes React.
  • JSS Otra opción más para estilos en js que es independiente del marco aunque tiene varios paquetes de marco, React-JSS entre ellos.
SamsonTheBrave
fuente
0

De todos modos, nunca se recomienda css en línea. Utilizamos componentes con estilo en nuestro proyecto que se basa en JSS. Protege la anulación de CSS al agregar nombres de clase dinámicos en los componentes. También puede agregar valores CSS basados ​​en los accesorios pasados.

Shivang Gupta
fuente