button.js

// 1. Second dynamic argument — first is "guarenteed" to not interpolate

const Button = styled.button(`
  /* Adapt the colors based on primary prop */
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`, (props) => `
  background: ${window.innerWidth < 1000 ? 'palevioletred' : 'white'};
  color: ${window.innerWidth < 1000 ? 'white' : 'palevioletred'};
`);

// 2. Explicit static opt-in, throws errors when dynamic props are used, and styles are extracted

const Button = styled.static.button(`
  /* Adapt the colors based on primary prop */
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
  background: transparent;
  color: #efefef;
`);