8 formas de aplicar estilo a los componentes de React

React es una biblioteca de JavaScript para crear interfaces de usuario. React hace que sea sencillo crear interfaces de usuario interactivas. Diseñe vistas simples para cada estado en su aplicación, y React actualizará y renderizará de manera eficiente solo los componentes correctos cuando cambien sus datos.

Hay alrededor de ocho formas diferentes de diseñar los componentes de React Js, a continuación se mencionan los nombres y las explicaciones de algunos de ellos.

1. CSS en línea
2. CSS normales
3. CSS en JS
4. Componentes con estilo
5. Módulo CSS
6. Sass y SCSS
7. Menos
8. Estilizable

CSS en línea: en el estilo en línea básicamente creamos objetos de estilo. Y renderícelo dentro de los componentes en el atributo de estilo usando la técnica React para incorporar la variable JavaScript dentro del JSX (Usando ‘{ }’ )

Ejemplo 1: este ejemplo ilustra cómo usar el estilo en línea para diseñar componentes de reacción.

índice.js:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
 
ReactDOM.render(<App />, document.querySelector('#root'))

Aplicación.js

import React, { Component } from 'react'
import StudentList from './StudentList'
 
const App = () => {
  return (
    <div>
      <StudentList
        name='Ashank'
        classNo='X'
        roll='05'
        addr='Kolkata, West Bengal'
      />
      <StudentList
        name='Samir'
        classNo='Xi'
        roll='09'
        addr='Jalpaiguri, West Bengal'
      />
      <StudentList
        name='Tusar'
        classNo='Xii'
        roll='02'
        addr='Howrah, West Bengal'
      />
      <StudentList
        name='Karishma'
        classNo='ix'
        roll='08'
        addr='Mednipur, West Bengal'
      />
    </div>
  )
}
 
export default App

StudentList.js: es un componente de lista de estudiantes representado por el componente de la aplicación. Muestra los detalles de cada alumno.

import React, { Component } from 'react'
 
class StudentList extends Component{
  render(){
    const {name, classNo, roll, addr} = this.props
    const ulStyle = {border: '2px solid green', width:'40%', listStyleType:'none'}
    const liStyle = {color : 'blue', fontSize:'23px'}
    return(
      <ul style={ulStyle}>
        <li style={liStyle}>Name : {name}</li>
        <li style={liStyle}>Class: {classNo}</li>
        <li style={liStyle}>Roll: {roll}</li>
        <li style={liStyle}>Address : {addr}</li>
      </ul>
    )
  }
}
 
export default StudentList

Producción:

Estilo usando estilos en línea

Ejemplo 2:

índice.js: 

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
 
ReactDOM.render(<App />, document.querySelector('#root'))

Aplicación.js

import React from 'react';
import Lottery from './Lottery'
 
function App() {
  return (
    <div>
      <Lottery />
      <Lottery title='Mini Daily'/>
    </div>
  );
}
 
export default App;

Ball.js: Componente de bola responsable de diseñar cada bola

import React, { Component } from 'react'
 
class Ball extends Component{
  render(){
    const ballStyle = {
      backgroundColor: 'tomato',
      borderRadius: '50%',
      width:'3em',
      height:'2.25em',
      textAlign:'center',
      paddingTop: '0.75em',
      display:'inline-block',
      marginRight: '0.5em',
      marginTop: '1em',
      color:'white',
      fontWeight: 'bold',
      fontSize: '1.5em'
    }
    return(
      <div style={ballStyle}>
        {this.props.num}
      </div>
    )
  }
}
 
export default Ball

Lottery.js: el componente de lotería responsable de representar una sola tarjeta de lotería consta de seis componentes de bolas.

import React,{ Component } from 'react'
import Ball from './Ball'
 
class Lottery extends Component{
  static defaultProps = {
    title : 'lotto',
    numbers : [1,2,3,4,5,6]
  }
 
  render(){
    const lotteryStyle={
      border: '2px solid grey',
      borderRadius: '10px',
      width:'40em',
      textAlign:'center',
      margin: '1em auto auto',
      padding: '1em 0 2em 0'
    }
    return(
      <div style={lotteryStyle}>
        <h3>{this.props.title}</h3>
        <div>
          {this.props.numbers.map(n => (
            <Ball num={n} />
          ))}
        </div>
      </div>
    )
  }
}
 
export default Lottery

Producción:

Estilo en línea

CSS normal: en la técnica de estilo CSS externo, básicamente creamos un archivo CSS externo para cada componente y hacemos el estilo requerido de las clases. y use esos nombres de clase dentro del componente. Es una convención que el nombre del archivo CSS externo sea el mismo que el nombre del componente con la extensión ‘.css’. Es mejor si el nombre de las clases utilizadas sigue el formato ‘componentName-context’ (aquí contexto significa dónde usamos este nombre de clase). Por ejemplo, si diseñamos el encabezado de un componente llamado ‘Box’, un mejor nombre de clase debería diseñar este elemento y debería ser ‘Box-header’.

Ejemplo: Este ejemplo ilustra cómo diseñar componentes de reacción con hojas de estilo externas.

índice.js:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
 
ReactDOM.render(<App />, document.querySelector('#root'))

Aplicación.js:

import React, { Component } from 'react'
import StudentList from './StudentList'
 
const App = () => {
  return (
    <div>
      <StudentList
        name='Ashank'
        classNo='X'
        roll='05'
        addr='Kolkata, West Bengal'
      />
      <StudentList
        name='Samir'
        classNo='Xi'
        roll='09'
        addr='Jalpaiguri, West Bengal'
      />
      <StudentList
        name='Tusar'
        classNo='Xii'
        roll='02'
        addr='Howrah, West Bengal'
      />
      <StudentList
        name='Karishma'
        classNo='ix'
        roll='08'
        addr='Mednipur, West Bengal'
      />
    </div>
  )
}
 
export default App

StudentList.js: es un componente de lista de estudiantes representado por el componente de la aplicación. Muestra los detalles de cada alumno.

import React, { Component } from 'react'
 
class StudentList extends Component{
  render(){
    const {name, classNo, roll, addr} = this.props
    return(
      <ul className='StudentList'>
        <li className='StudentList-details'>Name : {name}</li>
        <li className='StudentList-details'>Class: {classNo}</li>
        <li className='StudentList-details'>Roll: {roll}</li>
        <li className='StudentList-details'>Address : {addr}</li>
      </ul>
    )
  }
}
 
export default StudentList

StudentList.CSS: Dado que no hay lugar para agregar código CSS externamente, aquí añado una captura de pantalla del código CSS.

.StudentList{
    border: 2px solid green;
    width: 40%:
    list-style-type: none;
    }
 
.StudentList-details{
    color: blue;
    font-size: 23px;
    }

Producción:

Estilo CSS externo

CSS en JS: el ‘react-jss’ integra JSS con la aplicación de reacción para diseñar componentes. Ayuda a escribir CSS con Javascript y nos permite describir estilos de una manera más descriptiva. Utiliza objetos javascript para describir estilos de forma declarativa usando el método ‘createUseStyles’ de react-jss e incorpora esos estilos en componentes funcionales usando el atributo className.

Comando para instalar el paquete react-jss de terceros

npm install react-jss

Ejemplo :

índice.js:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
 
ReactDOM.render(<App />, document.querySelector('#root'))

Aplicación.js

import React, { Component } from 'react'
import StudentList from './StudentList'
 
const App = () => {
  return (
    <div>
      <StudentList
        name='Ashank'
        classNo='X'
        roll='05'
        addr='Kolkata, West Bengal'
      />
      <StudentList
        name='Samir'
        classNo='Xi'
        roll='09'
        addr='Jalpaiguri, West Bengal'
      />
      <StudentList
        name='Tusar'
        classNo='Xii'
        roll='02'
        addr='Howrah, West Bengal'
      />
      <StudentList
        name='Karishma'
        classNo='ix'
        roll='08'
        addr='Mednipur, West Bengal'
      />
    </div>
  )
}
 
export default App

StudentList.js: es un componente de lista de estudiantes representado por el componente de la aplicación. Muestra los detalles de cada estudiante.

import React, { Component } from 'react'
import {createUseStyles} from 'react-jss'
 
const styles = createUseStyles({
  student : {
    border : '2px solid green',
    width: '40%',
    listStyleType:'none'
  },
 
  studentDetails : {
    color : 'blue',
    fontSize : '23px'
  }
})
 
const StudentList = (props) => {
  const classes = styles()
  const {name, classNo, roll, addr} = props
  return(
    <ul className={classes.student}>
      <li className={classes.studentDetails}>Name : {name}</li>
      <li className={classes.studentDetails}>Class: {classNo}</li>
      <li className={classes.studentDetails}>Roll: {roll}</li>
      <li className={classes.studentDetails}>Address : {addr}</li>
    </ul>
  )
}
 
export default StudentList

Producción:

Estilo con CSS en JS

Componentes con estilo: los componentes con estilo nos permiten diseñar el CSS bajo la variable creada en JavaScript. componentes de estilo es un paquete de terceros mediante el cual podemos crear un componente como una variable de JavaScript que ya tiene un estilo con código CSS y usa ese componente con estilo en nuestro componente principal. Los componentes con estilo nos permiten crear componentes reutilizables personalizados que pueden ser menos complicados de mantener.

Comando para instalar el paquete de componentes con estilo de terceros

npm install --save styled-components

Ejemplo:

índice.js:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
 
ReactDOM.render(<App />, document.querySelector('#root'))

Aplicación.js

import React, { Component } from 'react'
import StudentList from './StudentList'
 
const App = () => {
  return (
    <div>
      <StudentList
        name='Ashank'
        classNo='X'
        roll='05'
        addr='Kolkata, West Bengal'
      />
      <StudentList
        name='Samir'
        classNo='Xi'
        roll='09'
        addr='Jalpaiguri, West Bengal'
      />
      <StudentList
        name='Tusar'
        classNo='Xii'
        roll='02'
        addr='Howrah, West Bengal'
      />
      <StudentList
        name='Karishma'
        classNo='ix'
        roll='08'
        addr='Mednipur, West Bengal'
      />
    </div>
  )
}
 
export default App

StudentList.js: es un componente de lista de estudiantes representado por el componente de la aplicación. Muestra los detalles de cada alumno.

import React, { Component } from 'react'
import styled from 'styled-components'
 
//styled component Li
const Li = styled.li`
  color : blue;
  font-size : 23px
`
 
//Styled component Ul
const Ul = styled.ul`
  border : 2px solid green;
  width: 40%;
  list-style-type:none
`
 
const StudentList = (props) => {
  const {name, classNo, roll, addr} = props
  return(
    <Ul>
      <Li>Name : {name}</Li>
      <Li>Class: {classNo}</Li>
      <Li>Roll: {roll}</Li>
      <Li>Address : {addr}</Li>
    </Ul>
  )
}
 
export default StudentList

Producción :

Estilo con componentes con estilo

Módulos CSS: un módulo CSS es un archivo CSS simple, pero una diferencia clave es que, de manera predeterminada, cuando se importa, cada nombre de clase y la animación dentro del módulo CSS tienen un alcance local para el componente que lo está importando, también el nombre del archivo CSS debe seguir el formato ‘ nombre de archivo.módulo.css’ . Esto nos permite usar un nombre válido para las clases de CSS sin preocuparnos por conflictos con otros nombres de clases en su aplicación.

Para usar módulos CSS, cree un archivo CSS normal, importe el módulo que ha creado desde dentro de su componente usando la sintaxis

import styles from './filename.module.css

Ejemplo :

índice.js:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
 
ReactDOM.render(<App />, document.querySelector('#root'))

Aplicación.js

import React, { Component } from 'react'
import StudentList from './StudentList'
 
const App = () => {
  return (
    <div>
      <StudentList
        name='Ashank'
        classNo='X'
        roll='05'
        addr='Kolkata, West Bengal'
      />
      <StudentList
        name='Samir'
        classNo='Xi'
        roll='09'
        addr='Jalpaiguri, West Bengal'
      />
      <StudentList
        name='Tusar'
        classNo='Xii'
        roll='02'
        addr='Howrah, West Bengal'
      />
      <StudentList
        name='Karishma'
        classNo='ix'
        roll='08'
        addr='Mednipur, West Bengal'
      />
    </div>
  )
}
 
export default App

StudentList.js:

import React, { Component } from 'react'
import style from './StudentList.module.css'
 
const StudentList = (props) => {
  const {name, classNo, roll, addr} = props
  return(
    <ul className={style.list}>
      <li className={style.details}>Name : {name}</li>
      <li className={style.details}>Class: {classNo}</li>
      <li className={style.details}>Roll: {roll}</li>
      <li className={style.details}>Address : {addr}</li>
    </ul>
  )
}
 
export default StudentList

StudentList.module.css: Dado que no hay lugar para agregar código CSS externamente, aquí agrego una captura de pantalla del código CSS.

.list{
    border: 2px solid green;
    width: 40%:
    list-style-type: none;
    }
 
.details{
    color: blue;
    font-size: 23px;
    }

Producción :

Estilo con módulos CSS

Sass y SCSS: Sass es el lenguaje de extensión CSS más estable, potente y de nivel profesional. Es un preprocesador de CSS que agrega características especiales como variables, reglas anidadas y mixins o azúcar sintáctico en CSS normal. El objetivo es hacer que el proceso de codificación sea más simple y eficiente.

Instalación:

• Paso 1: antes de continuar, primero debemos instalar node-sass, ejecutando el siguiente comando en el directorio de su proyecto, con la ayuda de la terminal en su carpeta SRC o también puede ejecutar este comando en la terminal de Visual Studio Code en su proyecto carpeta. 
   

npm install node-sass

• Paso 2: Una vez completada la instalación, creamos un archivo con el nombre StudentList.scss.
• Paso 3: ahora incluya los efectos CSS necesarios en su archivo CSS.
• Paso 4: ahora importamos nuestro archivo de la misma manera que importamos un archivo CSS en React.
• Paso 5: en su archivo app.js, agregue este fragmento de código para importar StudentList.scss.

import './ StudentList.scss';

A continuación se muestra un programa de ejemplo para ilustrar el enfoque anterior:

Ejemplo:

índice.js:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
 
ReactDOM.render(<App />, document.querySelector('#root'))

Aplicación.js:

import React, { Component } from 'react'
import StudentList from './StudentList'
 
const App = () => {
  return (
    <div>
      <StudentList
        name='Ashank'
        classNo='X'
        roll='05'
        addr='Kolkata, West Bengal'
      />
      <StudentList
        name='Samir'
        classNo='Xi'
        roll='09'
        addr='Jalpaiguri, West Bengal'
      />
      <StudentList
        name='Tusar'
        classNo='Xii'
        roll='02'
        addr='Howrah, West Bengal'
      />
      <StudentList
        name='Karishma'
        classNo='ix'
        roll='08'
        addr='Mednipur, West Bengal'
      />
    </div>
  )
}
 
export default App

StudentList.js:

import React, { Component } from 'react'
import './StudentList.scss'
 
const StudentList = (props) => {
  const {name, classNo, roll, addr} = props
  return(
    <ul className='list'>
      <li className='details'>Name : {name}</li>
      <li className='details'>Class: {classNo}</li>
      <li className='details'>Roll: {roll}</li>
      <li className='details'>Address : {addr}</li>
    </ul>
  )
}
 
export default StudentList

StudentList.scss: dado que no hay lugar para agregar código CSS externamente, aquí agrego una captura de pantalla del código CSS.

&blue-shade: #264BC4;
&pale-green-color: #3CC27F;
 
.list{
    border: 2px solid &pale-green-color;
    width: 40%:
    list-style-type: none;
    }
 
.details{
    color: &blue-shade;
    font-size: 23px;
    }

Producción :

Estilismo usando Sass