Mixing largerThan and useMediaQuery

[tender hearth]

I find myself constantly switching between useMediaQuery hook (on pages) and largerThan or smallerThan in components.

The issue that I'm facing, is that - if I get it right - these two don't mean exactly the same thing. There's what I'm trying to say

Assuming xl size is defined at 1440 pixels.

[theme.fn.largerThan("xl")]: {
paddingLeft: 100,
paddingRight: 100
}

^ this means that a padding applies to sizes 1441+ (Basically, it takes the XL size and adds 1). But not on exactly 1440

That's all cool, but then on the page I might have something like

const largeScreen = useMediaQuery(`(min-width: ${theme.breakpoints.xl}px)`);

            <Text
                px={largeScreen ? 100 : 0}>
                Lorem Ipsum
            </Text>

If this second case, I will get a padding left/right of 100px also on 1440 width size.

This make the two approaches not bahaving the same way. Is this normal? What's the best way to do this?

I've currently settled for adding a +1 to useMediaQuery. But this feels like a "hack" that another person working with me on the project won't understand.

useMediaQuery(`(min-width: ${theme.breakpoints.xl + 1}px)`)

[quasi storm]

You can use theme.fn.smallerThan('xl') and useMediaQuery('(max-width: ${theme.breakpoints.xl}px)'); to avoid this issue

[tender hearth]

I don't follow?
In the above example, using theme.fn.smallerThan('xl') will get be 100px padding on 1440- screens. And useMediaQuery('(max-width: ${theme.breakpoints.xl}px)') on 1440+ screens. That covers basically...everything.
I only need to target all 1440+.

[quasi storm]

If you use theme.fn.smallerThan it does not modify breakpoints, if you use theme.fn.largerThan it modifies breakpoints. If you do not want breakpoints to be modified use theme.fn.smallerThan only.

[tender hearth]

What do you mean "modify breakpoints" ? Also, how does one use smallerThan to only target, for example, 1440+ widths?