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.

Valores mínimos y máximos dinámicos dentro de un componente estilizado.

19 Jul, 2023 Programación

Estoy tratando de hacer que el número de 250px dentro de la función minmax sea dinámico dentro de un componente estilizado.

Normalmente podría usar algo así:

minmax(${props => props.minWidth}, 1fr)

Pero esto se rompe al instante y ni siquiera se renderiza porque es una sintaxis inválida.

Este es mi código actual sin que sea dinámico. Cualquier idea es muy apreciada 🙂

const GridContainer = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: auto;
  grid-gap: 20px;
  width: 100%;
`;
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que el número 250px sea dinámico dentro de un componente estilizado usando props, puedes utilizar plantillas literales con acentos invertidos “ en lugar de comillas ” o “”, de esta manera:

    const GridContainer = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(${props => props.minWidth}, 1fr));
  grid-auto-rows: auto;
  grid-gap: 20px;
  width: 100%;
`;

    En este ejemplo, el valor de props.minWidth reemplazará la parte ${props => props.minWidth} de la plantilla literal. Puedes pasar el valor de minWidth como un prop al renderizar el componente. Por ejemplo:

    const App = () => (
  <gridcontainer minwidth="{200}">
    {/* ... */}
  </gridcontainer>
);

    Esto mostrará una cuadrícula con columnas que tienen un ancho mínimo de 200px y un ancho máximo de 1fr. Puedes cambiar el valor de minWidth de forma dinámica actualizando el prop.

    Ten en cuenta que si el prop minWidth no se proporciona o no es válido (por ejemplo, no es un número), el componente se romperá. Puede que quieras agregar alguna validación o valores predeterminados para evitar esto.

Comments are closed.