样式组件内的动态 minmax 值

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

样式组件内的动态 minmax 值

Dynamic minmax values inside styled component

javascript

css-grid

styled-components