useMediaQuery | MediaQuery

[serene marlin]

So I'm unable to grok these. It's a bit too complicated for something trivial I'm trying to do.

Let's say I have a grid and I want to set 1 grid col to the following:

width={{ sm: 200, lg: 300 }}

How do I do this? Bear in mind. It's a one time thing and only for this component. I may have multiple other components in future that I will want to do the same modification.

Also I much prefer using the xs, sm, md, lg nomenclature, as it's really easy for me to understand.

Thanks

[hollow owl]

I did not get the question, what is the issue?

[serene marlin]

Sorry about that. Reading the documentation of useMediaQuery | MediaQuery is too confusing. It's been a long time since I have had to do anything MediaQuery related.

When I look at components like Aside, it has the following:

width={{ sm: 200, lg: 300 }}

That's nice and simple to understand. 😄

How can I achieve the following (not correct just example):

<Grid>
  <Grid.Col sx={{ width={sm: 200, lg: 300} }}>1</Grid>
  <Grid.Col span="auto">2</Grid>
</Grid>

[hollow owl]

<Grid.Col sx={(theme) => ({ 
[theme.fn.largerThan('sm')]: { width: 200 },
[theme.fn.largerThan('lg')]: { width: 300 },
}} />

[clear nymph]

Does <Grid.Col w={{ base: <?>, sm: 200, lg: 300}}> work? Sorry, can't test it myself right now.