Using Javascript Variables with styled-components

Question

I\'m using styled-components to build my components. All style properties which accept custom values are reused throughout my components (as it should be). With that in mind

Answer 1

Your final solution works for 2 two reasons:

1. Simply declaring a variable in a file does not attach it to the global scope for the entire app, so other files are unaware of it unless imported in.
2. 16px is not a valid value. It needed to either be wrapped in quotes to make it a string (like you did with '20px'), or the px needed to be removed.

I ran into a similar situation, except I needed my variables to be numbers instead of strings, and this also works:

const CELL_SIZE = 12;
const ROWS = 7;
const CELL_GAP = 3;

const BannerGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, ${CELL_SIZE}px);
  grid-template-rows: repeat(${ROWS}, ${CELL_SIZE}px);
  grid-column-gap: ${CELL_GAP}px;
  grid-row-gap: ${CELL_GAP}px;
  grid-auto-flow: column;
`;