es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

React ChakraUI tabla con rayas, color de fondo de celda individual.

17 Jul, 2023 Programación

Como sugiere el título, no estoy completamente seguro de la solución a esto ya que es bastante complicado. Me gustaría establecer un color específico ya que es importante en el aspecto de la interfaz de usuario de mi programa, en lugar de realizar una representación del esquema de color (o simplemente ejecutar un bucle) para decidir de qué color sería cada celda, y simplemente hacer una excepción para la celda que quiero que tenga el fondo rojo, sea roja. Debe haber una forma mucho más versátil, pero por más que lo intento, simplemente no puedo lograrlo. Cualquier ayuda en la dirección correcta será muy apreciada TYIA!

<Table variant="striped" colorScheme="gray">
            <TableCaption>Factores de conversión imperial a métrico</TableCaption>
            <Thead>
                <Tr>
                    <Th>Marco de tiempo</Th>
                    <Th>Base</Th>
                    <Th>Facturas</Th>
                    <Th>Con Facturas</Th>
                </Tr>
            </Thead>
            <Tbody>
                <Tr>
                    <Td>pulgadas</Td>
                    <Td>milímetros (mm)</Td>
                    <Td isNumeric background="darkred">25.4</Td> //¡ESTO NO FUNCIONA!
                </Tr>
                <Tr>
                    <Td>pies</Td>
                    <Td>centímetros (cm)</Td>
                    <Td isNumeric>30.48</Td>
                </Tr>
                <Tr>
                    <Td>yardas</Td>
                    <Td>metros (m)</Td>
                    <Td isNumeric>0.91444</Td>
                </Tr>
            </Tbody>
            <Tfoot>
                <Tr>
                    <Th>Para convertir</Th>
                    <Th>en</Th>
                    <Th isNumeric>multiplicar por</Th>
                </Tr>
            </Tfoot>
        </Table>
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para establecer un color de fondo para una celda específica en una tabla usando Chakra UI, puedes usar el componente Box y envolverlo alrededor del contenido de la celda, en lugar de usar directamente la propiedad isNumeric en el componente Td. Aquí tienes un ejemplo:

    <table variant="striped" colorscheme="gray">
  <tablecaption>Factores de conversión imperial a métrico</tablecaption>
  <thead>
    <tr>
      <th>Marco Temporal</th>
      <th>Base</th>
      <th>Cuentas</th>
      <th>Con Cuentas</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>pulgadas</td>
      <td>milímetros (mm)</td>
      <td>
        <box bg="darkred">
          25.4
        </box>
      </td>
    </tr>
    <tr>
      <td>pies</td>
      <td>centímetros (cm)</td>
      <td>30.48</td>
    </tr>
    <tr>
      <td>yardas</td>
      <td>metros (m)</td>
      <td>0.91444</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Para convertir</th>
      <th>a</th>
      <th>multiplicar por</th>
    </tr>
  </tfoot>
</table>

    En este ejemplo, envolvimos el contenido 25.4 en un componente Box y establecimos su color de fondo en darkred usando la propiedad bg. Esto establecerá el color de fondo específicamente para esa celda, sin afectar a las otras celdas de la tabla.

    Además, si necesitas establecer diferentes colores de fondo para varias celdas, puedes crear una clase CSS personalizada con los estilos deseados y añadirla a la propiedad className del componente Box. Por ejemplo:

    .box-red {
  background-color: darkred;
}

    <table variant="striped" colorscheme="gray">
  <tablecaption>Factores de conversión imperial a métrico</tablecaption>
  <thead>
    <tr>
      <th>Marco Temporal</th>
      <th>Base</th>
      <th>Cuentas</th>
      <th>Con Cuentas</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>pulgadas</td>
      <td>milímetros (mm)</td>
      <td>
        <box classname="box-red">
          25.4
        </box>
      </td>
    </tr>
    <tr>
      <td>pies</td>
      <td>centímetros (cm)</td>
      <td>30.48</td>
    </tr>
    <tr>
      <td>yardas</td>
      <td>metros (m)</td>
      <td>
        <box classname="box-red">
          0.91444
        </box>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Para convertir</th>
      <th>a</th>
      <th>multiplicar por</th>
    </tr>
  </tfoot>
</table>

    Aquí, añadimos la clase box-red al componente Box, lo que establece su color de fondo en darkred usando CSS. Puedes reutilizar esta clase para cualquier otra celda que necesite tener un color de fondo similar.

Comments are closed.