CSS en React

Clase 7 de 23 • Curso de React 17

Clase anteriorSiguiente clase

Resumen

Existen varias formas de agregar estilos en React:

  • Hoja de estilos externa: podemos crear nuestro archivo CSS con todos nuestros estilos y después importarlo.
  • Estilos en línea: así como en HTML, también podemos agregar estilos en línea, pero con una diferente sintaxis

Estilos en línea

Para estos estilos necesitamos agregarle las llaves principales a la propiedad {}, para poder pasarle un objeto de JavaScript con nuestros estilos, también cambia un poco la sintaxis de CSS, aquí se utiliza el camelCase para el nombre de las propiedades de CSS, y para los valores necesitamos escribirlos entre comillas.

import React from "react";

function TodoCounter(){
    return(
        <h2 style={{
                color: 'red',
                backgroundColor: 'yellow'
            }}
        >
            Has complentado 2 de 3 ToDos
        h2>
    )
}

export {TodoCounter};

Los estilos en línea en React son mala práctica por las mismas razones que lo son en HTML.

Hoja de estilos externa

También podemos importar un archivo CSS directamente en React:

.TodoCounter {
    font-size: 24px;
    text-align: center;
}

import React from "react";
import './todoCounter.css'

function TodoCounter(){
    return(
        <h2 className="TodoCounter">
            Has complentado 2 de 3 ToDos
        h2>
    )
}

export {TodoCounter};

Reto

Te animamos a que crees tu propio diseño, que le agregues tu identidad y tus propios estilos.
¡Esperamos ver tu aplicación pronto en los comentarios!

Estilos y componentes

Ahora crearemos los estilos de cada uno de nuestros componentes, fíjate bien en la lógica de nuestro TodoItem, estaremos utilizando JavaScript para alternar nuestros estilos, dependiendo si el TODO está completado o no.

TodoCounter

.TodoCounter {
  font-size: 24px;
  text-align: center;
  margin: 0;
  padding: 48px;
}

import React from 'react';
import './TodoCounter.css';

function TodoCounter() {
  return (
    <h2 className="TodoCounter">Has completado 2 de 3 TODOsh2>
  );
}

export { TodoCounter };

TodoSearch

.TodoSearch {
  background: #F9FBFC;
  border-radius: 2px;
  border: 2px solid #202329;
  margin: 0 24px;
  height: 64px;
  width: calc(100% - 62px);
  font-size: 24px;
  text-align: center;
  font-family: 'Montserrat';
  font-weight: 400;
  color: #1E1E1F;
  box-shadow: 0px 5px 50px rgba(32, 35, 41, 0.25);
}

.TodoSearch::placeholder {
  color: #A5A5A5;
  font-family: 'Montserrat';
  font-weight: 400;
}

.TodoSearch:focus {
  outline-color: #61DAFA;
}

import React from 'react';
import './TodoSearch.css';

function TodoSearch() {
  return (
    <input className="TodoSearch" placeholder="Cebolla" />
  );
}

export { TodoSearch };

TodoList

ul {
  margin: 0;
  padding: 0 0 56px 0;
  list-style: none;
}

import React from 'react';
import './TodoList.css'

function TodoList(props) {
  return (
    <section>
      <ul>
        {props.children}
      ul>
    section>
  );
}

export { TodoList };

TodoItem

.TodoItem {
  background-color: #FAFAFA;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
  box-shadow: 0px 5px 50px rgba(32, 35, 41, 0.15);
}

.TodoItem-p {
  margin: 24px 0 24px 24px;
  width: calc(100% - 120px);
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
}
.TodoItem-p--complete {
  text-decoration: line-through;
}

.Icon {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  width: 48px;
  font-size: 24px;
  font-weight: bold;
  /* background-color: #CCC; */
}

.Icon-check {
  position: absolute;
  left: 12px;
}
.Icon-check--active {
  color: #4caf50;
}

.Icon-delete {
  position: absolute;
  top: -24px;
  right: 0;
}
.Icon-delete:hover {
  color: red;
}

import React from 'react';
import './TodoItem.css';

function TodoItem(props) {
  return (
    <li className="TodoItem">
      <span className={`Icon Icon-check ${props.completed && 'Icon-check--active'}`}>
        √
      span>
      <p className={`TodoItem-p ${props.completed && 'TodoItem-p--complete'}`}>
        {props.text}
      p>
      <span className="Icon Icon-delete">
        X
      span>
    li>
  );
}

export { TodoItem };

CreateTodoButton

.CreateTodoButton {
  background-color: #61DAFA;
  box-shadow: 0px 5px 25px rgba(97, 218, 250, 0.5);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 50px;
  position: fixed;
  bottom: 24px;
  right: 24px;
  font-weight: bold;
  color: #FAFAFA;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 64px;
  width: 64px;

  transform: rotate(0);
  transition: .3s ease;
}

.CreateTodoButton:hover {
  transform: rotate(224deg);
}

import React from 'react';
import './CreateTodoButton.css';

function CreateTodoButton(props) {
  return (
    <button className="CreateTodoButton">+button>
  );
}

export { CreateTodoButton };

Agregar fuentes

Dentro de la carpeta public/ tenemos nuestro archivo HTML, en donde podemos poner un con alguna fuente de google fonts.


<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet" />
    <title>React Apptitle>
  head>
  <body>
    <noscript>You need to enable JavaScript to run this app.noscript>
    <div id="root">div>
  body>
html>

Una vez importamos nuestra fuente ya la podemos llamar en nuestros estilos.

body {
  margin: 0;
  padding: 0;
  background: #F2F4F5;
  color: #1E1E1F;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}

#root {
  margin: 0 24px;
  position: relative;
  min-height: 100vh;
}

Ahora ya podemos importar nuestros estilos del index.css, al ser estilos globales es mejor importarlos en el index.js de nuestra aplicación.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Props para TodoItem

Ya que creamos los estilos para los TODOs completados y no completados, y también en el componente creamos la lógica para alternar los estilos dependiendo si está completado o no, solo nos hace falta pasarle la propiedad completed desde nuestro App.js.

import React from 'react';
import { TodoCounter } from './TodoCounter';
import { TodoSearch } from './TodoSearch';
import { TodoList } from './TodoList';
import { TodoItem } from './TodoItem';
import { CreateTodoButton } from './CreateTodoButton';
// import './App.css';

const todos = [
  { text: 'Cortar cebolla', completed: true },
  { text: 'Tomar el cursso de intro a React', completed: false },
  { text: 'Llorar con la llorona', completed: false },
  { text: 'LALALALAA', completed: false },
];

function App() {
  return (
    
      
      

      
        {todos.map(todo => (
          
        ))}
      

      
    
  );
}

export default App;

Cambio dinámico de clases

Una de las grandes ventajas de React, es que podemos utilizar los lógicos && y || para jugar con nuestras clases muy fácilmente, y dar estilos dependiendo de la clase que esté activa, esto lo aplicamos cuando está completado o no nuestro TODO.

Contribución creada por: Brandon Argel.