Accessibility

Using rem is always better for accessiblity, but it is very hard to implement a complete design using rem unit because most of design tools are not ready for it. For example, Sketch displays pixels instead of rem.

xstyled solves this problem by automatically transforming your px into rem. It uses a base of 1rem = 16px, the default on modern browsers.

Use rem instead of px by default

To use rem instead of px, configure transformers in your theme. All unitless properties will be transformed into rem instead of px.

import styled, { ThemeProvider } from '@xstyled/styled-components'
import { rpxTransformers } from '@xstyled/system'
const theme = {
transformers: {
...rpxTransformers,
},
}
const Title = styled.h1`
font-size: 20;
`
export default () => (
<ThemeProvider theme={theme}>
<Title>Hello</Title>
<Box m={16} />
</ThemeProvider>
)
// The style of the `Title` will be `font-size: 1.25rem` instead of `font-size: 1.25rem`.
// The style of the `Box` will be `margin: 1rem` instead of `margin: 16px`.

If you want to use px again, just specify it: font-size: 12px.

Use rpx unit

If you don't want to use transformers, you have to specify rpx to use px as rem. rpx is supported in the majority of CSS properties.

import styled from '@xstyled/styled-components'
const Title = styled.h1`
font-size: 20rpx;
line-height: 24rpx;
`
// This code will output:
// font-size: 1.25rem;
// line-height: 1.5rem;

You may have to use th.px when auto-detection cannot be made, in special cases like calc .

import styled from 'styled-components'
import { th } from '@xstyled/system'
const Title = styled.h1`
width: calc(100% + ${th.px('20rpx')});
`
// This code will output:
// width: calc(100% + 1.25rem);