Dynamic minmax values inside styled component

user_3689720 0
Viewed 181

I'm trying to make the 250px number inside the minmax function dynamic inside a styled component.

Normally I could just use something like this:

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

But this breaks instantly and won't even render because it's invalid syntax.

This is my code right now without it being dynamic. Any ideas much appreciated :)

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

You need to use template literals.

Below is the code with the correct use of props in the styled component.

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%;
`;

With default minWidth.

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%;
`;
user_159991410
Related