Manejo de estilo en React - Solify-IT/psyche-ing GitHub Wiki

Objetivo

• Mejorar el manejo de estilos dentro del ambiente de frontend y disminuir el número de defectos de tipo estilo.

Guia de estilo

Todo el código e implementación del frontend deberá seguir la guia de estilo establecido del proyecto así como los wireframes.

CSS en Javascript / Typescript

Para manejar los estilos y el CSS en el proyecto se utilizara la técnica CSS en Javascript / Typescript. De esta forma, podemos manejar los estilos de una forma global y por componente sin tener que crear archivos adicionales de CSS o SASS.

Librería utilizada

La librería de estilo y de componentes es Material UI. La documentación de esta librería puede encontrarse en la siguiente pagina.

Estilo global

El estilo global de la aplicación está guardada en el archivo index.tsx de la raíz de la aplicación. En esta, se crea un "theme" de Material UI con atributos globales establecidos como la paleta de colores, la tipografía, y entre otros aspectos que se puede encontrar en la siguiente pagina.

Es importante que todo el estilo que aplique en todas las vistas de la aplicación vaya dentro de esta configuración. Por otro lado, también se debe tener cuidado de agregar o modificar la configuración de este archivo ya que afecta el estilo de toda la aplicacion y podria tener resultados no deseados como cambiar el color de todos los títulos a un verde feo.

Ejemplo

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#C94B72',
    },
    secondary: {
      main: '#6EA84F',
      contrastText: '#fff',
    },
  },
  typography: {
    body2: {
      fontSize: 21,
      main: '#3f4238',
    },
  },
});

Estilo local

Para cada componente, se puede establecer un estilo local. Es decir, solo los atributos de CSS se aplican para ese componente o vista. El estilo local extiende del estilo global utilizando la función makeStyles que pasa el "theme" como parámetro del callback. Con esto, se puede utilizar los valores del estilo global para definir algunos atributos del estilo local.

Ejemplo de la definición de un estilo local.

const useStyles = makeStyles((theme) => ({
  heroContent: {
    padding: theme.spacing(4, 0, 2),
  },
  paper: {
    margin: '20px',
    padding: '30px',
  },
  formControl: {
    marginTop: '16px',
    marginLeft: '20px',
    textAlign: 'left',
    minWidth: 285,
  },
  group: {
    margin: theme.spacing(1, 0, 3),
    textAlign: 'left',
    minWidth: 320,
  },
  inputLabel: {
    paddingLeft: '10px',
  },
  date: {
    marginTop: '28px',
    marginLeft: '10px',
  },
  place: {
    marginLeft: '20px',
  },
  submit: {
    textAlign: 'center',
  },
  type: {
    textAlign: 'right',
  },
  next: {
    marginLeft: '10px',
  },
}));

Una vez declarado este objeto de estilo, este mismo se puede instanciar dentro del componente en donde se va a utilizar. Se recomienda utilizar algun nombre de variable descriptivo como classes.

Ejemplo de nueva instancia de estilo

const classes = useStyles();

Ya que se tiene la instancia de este objeto, se puede utilizar como className en los componentes de la vista.

Ejemplo del uso de una clase de la instancia de estilo

<Typography variant="h6" className={classes.type} color="secondary">

Como se puede ver, el componente Typography utilizara classes.type como override de estilos.