styled-components 媒體模板

媒體模板

開發(fā)響應式 web app 時媒體查詢是不可或缺的工具.

以下是一個非常簡單的示例,展示了當屏寬小于700px時,組件如何改變背景色:

const Content = styled.div`
  background: papayawhip;
  height: 3em;
  width: 3em;

  @media (max-width: 700px) {
    background: palevioletred;
  }
`;

render(
  <Content />
);

由于媒體查詢很長,并且常常在應用中重復出現,因此有必要為其創(chuàng)建模板.

由于 JavaScript 的函數式特性,我們可以輕松的定義自己的標記模板字符串用于包裝媒體查詢中的樣式.我們重寫一下上個例子來試試:

const sizes = {
  desktop: 992,
  tablet: 768,
  phone: 576,
}

// Iterate through the sizes and create a media template
const media = Object.keys(sizes).reduce((acc, label) => {
  acc[label] = (...args) => css`
    @media (max-width: ${sizes[label] / 16}em) {
      ${css(...args)}
    }
  `

  return acc
}, {})

const Content = styled.div`
  height: 3em;
  width: 3em;
  background: papayawhip;

  /* Now we have our methods on media and can use them instead of raw queries */
  ${media.desktop`background: dodgerblue;`}
  ${media.tablet`background: mediumseagreen;`}
  ${media.phone`background: palevioletred;`}
`;

render(
  <Content />
);