相关疑难解决方法(0)

我想要一个用Emotion设计的组件,它采用最终控制样式的道具.例如,考虑GridCol具有各种道具的组件,这些道具可以更改填充和宽度(宽度可以在不同的视口宽度上更改).

我想使用这样的API:

<GridCol gutter size="2>

// or alternatively, like this:

<GridCol gutter size={{
  m: 2,
  l: 4
}}>

这里发生了三件事:

• 这gutter是一个布尔道具,可以为列添加一些水平填充
• 所述size支柱可以是字符串或一个对象.如果它是一个字符串,我们只是添加几行CSS并且我们很好,但是,如果它是一个对象,我们需要根据在别处设置的断点对象插入一些媒体查询.

Emotion的文档不清楚如何处理这种性质的样式,至少我还没有看到它,所以我希望找到一个共同的解决方案.

对于gutter道具,它是微不足道的:

const GridCol = props => styled('div')`
  display: block;
  box-sizing: border-box;
  flex: 1 0 0;
  min-width: 0;
  padding: ${props.gutter ? `0 10px` : '0'};
`

对于size道具,它变得更复杂,我希望得到的CSS看起来像这样:

const GridCol = props => styled('div')`
  display: block;
  box-sizing: border-box;
  flex: 1 0 0;
  min-width: 0;
  padding: ${props.gutter ? …