Access custom theme values

[meesfrenkelfrank]

I have to create a responsive grid with CSS grid.

In my theme.js I have:

template: {
    xs: {
      rows: 'auto',
      columns: 'auto',
    },
    sm: {
      rows: 'auto',
      columns: 'repeat(2,1fr)',
    },
    md: {
      rows: 'auto',
      columns: 'repeat(4,1fr)',
    },
    lg: {
      rows: 'auto',
      columns: 'repeat(6,1fr)',
    },
  },

Now in my component I want to do something like this:

<Grid
        gridTemplateColumns={[template.xs.columns, template.sm.columns, template.md.columns]}
        gridGap="30px"
      >
        {items?.map((item) => (
          <MyItem />
        ))}
</Grid>

But then I get:

any
'template' is not defined.eslintno-undef
Cannot find name 'template'.ts(2304)

Is this the correct approach and what do I have to do to get this working?

[TyMick]

I take it template is a property in your theme object? You'll need to get your theme object itself using your CSS-in-JS library. Here are the theming docs for styled-components and for Emotion, to get you started—not sure which one you're using.