javascript - 样式组件内的动态最小最大值

Question

我正在尝试使 minmax 函数内的 250px 数字在样式组件内动态化。

通常我可以使用这样的东西:

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

但这会立即中断，甚至不会渲染，因为它的语法无效。

这是我现在的代码，但它不是动态的。非常感谢任何想法:)

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

Answer 1

您需要使用模板文字。

下面是在样式组件中正确使用 props 的代码。

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

使用默认的最小宽度。

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