Aplicación de estilos inline en React

1. Estilo en línea en React
2. React estilo en línea condicional

El diseño de elementos o componentes HTML es una parte fundamental del trabajo del desarrollador front-end. Los estilos son esenciales para garantizar la ubicación y apariencia adecuadas del elemento HTML. Los desarrolladores de React aplican estilos usando muchos enfoques diferentes. Una de las formas más populares es utilizar estilos en línea. En el artículo de hoy, queríamos discutir los beneficios y desventajas de usar estilos en línea.

Estilo en línea en React

Los desarrolladores de React suelen tener una forma preferida de diseñar sus componentes. Algunos crean archivos CSS separados para cada componente, mientras que otros combinan todos sus estilos en un solo archivo. Al escribir estilos para una aplicación completa en un archivo, es mucho más probable que se quede sin nombres descriptivos (y únicos) para las clases.

Las definiciones de estilo en línea le permiten diseñar componentes sin crear dos archivos separados para JavaScript y CSS. Los estilos definidos de esta manera son más legibles que las reglas CSS globales y, al usarlos, es menos probable que tenga problemas de nombres.

Sintaxis

Los estilos en línea en React funcionan de la manera que esperaría si los hubiera usado en HTML. Al igual que en HTML, los estilos en línea en React se configuran mediante el atributo style. Además, de manera similar a HTML, los estilos en línea también anulan las clases en React.

Ahora, hablemos de las diferencias. Para diseñar sus componentes o elementos en JSX, debe proporcionar un objeto (o referencia a un objeto) que represente los estilos. Para asegurarse de que JSX pueda descifrar su objeto de estilo, debe colocarlo dentro de un par de llaves. Así es como se vería una declaración de estilo en línea simple:

<h1 style={{display: "none"}}>Hi! Try edit me</h1>;

En este ejemplo, la capa exterior de llaves asegura que el objeto dentro de ellas se evalúe como una expresión de JavaScript.

Cuando se trata de sintaxis, probablemente la mayor diferencia entre los estilos en línea en React vs HTML es que no puede usar nombres de propiedades CSS normales en los estilos en línea de React. Las propiedades que constan de una sola palabra suelen ser las mismas, pero las que constan de varias palabras normalmente se combinan en una palabra y se escriben en camelCase. Por ejemplo, la propiedad font-size se convierte en fontSize en los estilos de React.

Esencialmente, los estilos en línea en React se representan como un objeto, con pares clave-valor que corresponden a las propiedades CSS y sus valores. Una coma debe separar los pares clave-valor; de lo contrario, es posible que obtenga un error.

React estilo en línea condicional

Su código JSX puede contener objetos JavaScript que se pueden compilar en estilos válidos. Esta es una característica extremadamente útil porque nos permite aplicar estilos de forma condicional. Podemos usar el operador ternario de JavaScript dentro de las llaves para configurar condiciones complejas para describir las instancias en las que se deben aplicar los estilos.

Imaginemos que nuestro sitio web tiene un tema oscuro y un tema claro. Podemos usar la propiedad dark en el objeto state del componente para cambiar condicionalmente entre los dos temas. He aquí un ejemplo.

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      dark: false
    }
  }
  render() {
    return <div>
              <h1 style={{backgroundColor: this.state.dark ? "black" : "white", color: this.state.dark ? "white" : "black"}}>
                  Hi! Try edit me</h1>
              <button onClick={() => this.setState({dark: !this.state.dark})}>Switch</button>
           </div>;
  }
}

Lo anterior es una demostración simple de lo útiles que pueden ser los estilos en línea.

En el fragmento de código anterior, es posible que haya notado que nuestro objeto de estilo es demasiado largo y puede ser difícil de seguir. En lugar de escribir todo el objeto entre llaves, podemos definirlo en otro lugar y hacer referencia a él. Cuando observe que su objeto de estilo en línea contiene demasiadas reglas, muévalo fuera de JSX. Puede crear una variable con un nombre descriptivo para almacenar el objeto de estilo y usar el nombre de la variable para hacer referencia a él. De esta forma, sus estilos son más fáciles de leer. He aquí un ejemplo.

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      dark: false
    }
  }
  render() {
    const darkThemeStyles = {
       backgroundColor: this.state.dark ? "black" : "white",
       color: this.state.dark ? "white" : "black"   
    }
    return <div>
              <h1 style={darkThemeStyles}>Hi! Try edit me</h1>
              <button onClick={() => this.setState({dark: !this.state.dark})}>Switch</button>
           </div>;
  }
}

De esta manera, el código JSX debajo de su declaración return es más fácil de leer y se ve mucho más limpio.

A algunos desarrolladores de React les encantan los estilos en línea porque son fáciles de leer y su alcance se limita a un solo componente en lugar de definirse globalmente. Las personas que trabajan en un componente pueden comprender fácilmente el estilo del componente.

Sin embargo, hay algunos casos en los que CSS sigue siendo útil. Por ejemplo, tiene :hover y muchos otros selectores, que JavaScript no tiene.