Usando estilos en línea con la función calc() en React

Los estilos en línea son una forma de aplicar estilos CSS directamente a un elemento HTML utilizando un objeto JavaScript. En React, los estilos en línea se pueden usar para diseñar componentes dinámicamente en función de accesorios o datos. Si bien los estilos en línea pueden ser convenientes para un diseño rápido, generalmente no se recomiendan para proyectos a gran escala debido a sus limitaciones en cuanto a mantenibilidad y reutilización.

En este tutorial, aprenderemos cómo usar la función CSS calc() cuando usamos estilos en línea en React.
 

La función calc() calcula el valor de una propiedad (operaciones de suma, resta, multiplicación y división):

calc(expression)

Si su expresión no contiene ninguna variable, puede envolverla con un par de comillas simples o dobles:

<div style={{width: 'calc(100% - 99px)'}}></div>

Por otro lado, si su expresión involucra variables, puede usar un literal de plantilla (cadena de plantilla) con caracteres de acento grave (`), así:

<div style={{width: `calc(100% / ${columns.length})`}}></div> 

Para obtener una mejor comprensión y mayor claridad, consulte el ejemplo completo a continuación.

Ejemplo de código:

1. Cree un nuevo proyecto de React (para asegurarnos de que tengamos el mismo punto de partida):

npx create-react-app kindacode-calc-example

El nombre no importa.

con lo siguiente:src/App.js

// src/App.js
import { useState } from 'react';

function App() {
  // This state holds the columns of the layout
  const [columns, setColumns] = useState([{ id: 1, name: 'Column 1' }]);

  // Add a new column
  // This function is called when the user clicks the "Add Column" button
  const addColumn = () => {
    const newColumns = [...columns];
    newColumns.push({
      id: newColumns.length + 1,
      name: `Column ${newColumns.length + 1}`,
    });
    setColumns(newColumns);
  };

  return (
    <div style={{ padding: 30 }}>
      <h2>Welcome to</h2>
      {/* This button is used to add new columns */}
      <button onClick={addColumn} style={{ padding: '10px 30px' }}>
        Add Column
      </button>

      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          marginTop: 30,
        }}
      >

        {/* Render the columns */}
        {columns.map((column) => (
          <div
            key={column.id}
            style={{
              // Divide the width equally
              width: `calc(100% / ${columns.length})`, 
              height: 300,
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              background: '#3f51b5',
              // The more columns, the smaller the font size
              fontSize: `calc(60px / ${columns.length})`, 
              color: '#fff',
              border: '1px solid #ccc',
              borderRadius: 5,
            }}
          >
            <h5>{column.name}</h5>
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;

3. Inicie la aplicación:

npm start

Vaya a http://localhost:3000 con su navegador web favorito y vea el resultado.