Max-Width

Utilities for setting the maximum width of an element

React propsCSS Properties
maxWidth={size}max-width: {size};
maxW={size}max-width: {size};

Scaled Max-Width

All values specified in the sizes theme section are automatically applied. Note there is a little difference for scales between 0 and 1 due to conflicting with fluid range. You have to add a suffix s to target values from theme, like 0.5 becomes 0.5s and 1 becomes 1s.

<> <template preview> <x.div display="flex" flexDirection="column" spaceY={4} mx="auto" w={64}> {['1s', 8, 12, 16, 24].map((v) => ( <x.div key={v} display="flex" alignItems="center" spaceX={4}> <x.p fontSize="sm" color="light-blue-600" w={24} textAlign="right"> maxWidth={v} </x.p> <x.div w={32} bg="cool-gray-300" borderRadius="md" display="flex" alignItems="flex-end" > <x.div h={8} maxWidth={v} w={1} borderRadius="md" bg="light-blue-500" color="white" fontSize="2xl" fontWeight="extrabold" /> </x.div> </x.div> ))} </x.div> </template> <x.div> <x.div maxWidth="1s" w={32} /> <x.div maxWidth={8} w={32} /> <x.div maxWidth={12} w={32} /> <x.div maxWidth={16} w={32} /> <x.div maxWidth={24} w={32} /> </x.div> </>

Fixed Max-Width

Any valid value is accepted in width, numbers are converted to px, other units have to be specified.

<> <template preview> <x.div display="flex" flexDirection="column" spaceY={4} mx="auto" w={64}> {[110, '12px', '4rem', '3ex'].map((v) => ( <x.div key={v} display="flex" alignItems="center" spaceX={4}> <x.p fontSize="sm" color="emerald-600" w={24} textAlign="right"> maxWidth={v} </x.p> <x.div w={32} bg="cool-gray-300" borderRadius="md" display="flex" alignItems="flex-end" > <x.div h={8} maxWidth={v} w={1} borderRadius="md" bg="emerald-500" color="white" fontSize="2xl" fontWeight="extrabold" /> </x.div> </x.div> ))} </x.div> </template> <x.div> <x.div maxWidth={110} w={32} /> <x.div maxWidth="12px" w={32} /> <x.div maxWidth="4rem" w={32} /> <x.div maxWidth="3ex" w={32} /> </x.div> </>

Fluid Max-Width

Values from 0 to 1 are converted into percentages. As a fraction or a number, both are an expression. Of course specifying [value]% is also possible.

<> <template preview> <x.div spaceY={6}> <x.div display="flex" overflow="hidden" borderRadius="md" color="white" fontFamily="mono" bg="cool-gray-300" > <x.div w={0.3} px={2} py={4} bg="rose-500" textAlign="center"> 0.3 </x.div> </x.div> <x.div display="flex" overflow="hidden" borderRadius="md" color="white" fontFamily="mono" bg="cool-gray-300" > <x.div w={0.5} px={2} py={4} bg="rose-500" textAlign="center"> 0.5 </x.div> <x.div w={0.2} px={2} py={4} bg="cool-gray-500" textAlign="center"> 0.2 </x.div> </x.div> </x.div> </template> <x.div maxWidth={1 / 2} w={0.3}> maxWidth=1/2 </x.div> <x.div maxWidth={0.5} w={0.7}> maxWidth=0.5 </x.div> </>

Responsive

To control the margin of an element at a specific breakpoint, use responsive object notation. For example, adding the property maxWidth={{ md: 1 }} to an element would apply the maxWidth={1} utility at medium screen sizes and above.

<x.div maxWidth={{ xs: 1 / 2, md: 1 }} />

For more information about xstyled's responsive design features, check out Responsive Design documentation.

Customizing

Sizes scale

f you'd like to customize your values for width, height, min-width, min-height, max-width, max-height, all at once, use the theme.sizes section of your theme.

// theme.js export const theme = { sizes: { + sm: '8px', + md: '16px', + lg: '24px', + xl: '48px', }, }

Learn more about customizing the default theme in the theme customization documentation.

Edit this page on GitHub