Min-Width

Utilities for setting the minimum width of an element.

React propsCSS Properties
minWidth={size}min-width: {size};

Scaled Min-Width

All values specified in the sizes theme section are automatically applied. Note there is a little difference for scale 1, you have to specify 1s.

minWidth=1s

minWidth=8

minWidth=12

minWidth=16

minWidth=24

<x.div> <x.div minWidth="1s" w={0} /> <x.div minWidth={8} w={0} /> <x.div minWidth={12} w={0} /> <x.div minWidth={16} w={0} /> <x.div minWidth={24} w={0} /> </x.div>

Fixed Min-Width

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

minWidth=123

minWidth=12px

minWidth=4rem

minWidth=3ex

<x.div> <x.div minWidth={123} w={0} /> <x.div minWidth="12px" w={0} /> <x.div minWidth="4rem" w={0} /> <x.div minWidth="3ex" w={0} /> </x.div>

Fluid Min-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.

minWidth=1/2
minWidth=0.5
0.2
<x.div minWidth={1 / 2} w={0.1}> minWidth=1/2 </x.div> <x.div minWidth={0.5} w={0.7}> minWidth=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 minWidth={{ md: 1 }} to an element would apply the minWidth={1} utility at medium screen sizes and above.

<x.div minWidth={{ 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