Estoy tratando de hacer que el número de 250 px dentro de la función minmax sea dinámico dentro de un componente con estilo.
Normalmente podría usar algo como esto:
minmax(${props => props.minWidth}, 1fr)Pero esto se rompe instantáneamente y ni siquiera se renderiza porque es una sintaxis no válida.
Este es mi código ahora mismo sin que sea dinámico. Cualquier idea 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%; `;Necesita usar literales de plantilla.
A continuación se muestra el código con el uso correcto de accesorios en el componente con estilo.
const GridContainer = styled.div` display: grid; grid-template-columns: ${(p) => `repeat(auto-fit, minmax(${p.minWidth}, 1fr))`}; grid-auto-rows: auto; grid-gap: 20px; width: 100%; `;Con minWidth predeterminado.
const GridContainer = styled.div` display: grid; grid-template-columns: ${(p) => `repeat(auto-fit, minmax(${p.minWidth || '250px'}, 1fr))`}; grid-auto-rows: auto; grid-gap: 20px; width: 100%; `;