Advanced API

In addition to the props detailed below, all layout components also have access to the props mentioned in the common API section.

The style prop allows passing inline CSS styles. This prop is available on all standard HTML elements in addition to the components in this library. Use inline styles to add CSS styles that are not supported in the common API.

Note that inline styles do not have direct access to theme values, and cannot use the responsive style syntax.

<Box
    width="100px"
    height="100px"
    backgroundColor="Secondary"
    style={{
        cursor: 'crosshair',
        transform: 'scale3d(1.5, 0.75, 1)',
    }}
/>
<Box
    width="100px"
    height="100px"
    backgroundColor="Secondary"
    style={{
        cursor: 'crosshair',
        transform: 'scale3d(1.5, 0.75, 1)',
    }}
/>
Live Demo

Alternatively, make a new styled-component and add the CSS styles there.

import styled from 'styled-components'
import { Box } from '@intouchg/components'

const CursorBox = styled(Box)`
    cursor: pointer;
    transform: scale3d(1.5, 0.75, 1);
`

Inline styles should also be used for styles that are updated outside the react render cycle - such as values from react-spring.

The sx prop takes an object with CSS selectors as keys, and style objects as values. These style objects have access to theme values, just like the common API, and can use responsive styles.

<Box
    width="200px"
    height="100px"
    backgroundColor="Primary"
    sx={{
        '&:hover': {
            backgroundColor: 'Secondary',
        },
        '&:active': {
            backgroundColor: 'Tertiary',
        },
    }}
/>
<Box
    width="200px"
    height="100px"
    backgroundColor="Primary"
    sx={{
        '&:hover': {
            backgroundColor: 'Secondary',
        },
        '&:active': {
            backgroundColor: 'Tertiary',
        },
    }}
/>
Live Demo

<Box
    width="200px"
    height="100px"
    backgroundColor="Primary"
    sx={{
        '&:hover': {
            backgroundColor: [ 'Tertiary', null, null, 'Secondary' ],
        },
    }}
/>
<Box
    width="200px"
    height="100px"
    backgroundColor="Primary"
    sx={{
        '&:hover': {
            backgroundColor: [ 'Tertiary', null, null, 'Secondary' ],
        },
    }}
/>
Live Demo

If you create your own styled-components, you can add the sx property to them using the function exported from this library. You can also combine this with the styleFunctions mentioned in Getting Started.

import styled from 'styled-components'
import { styleFunctions, sx } from '@intouchg/components'

const MyHeading = styled.h1`
    font-size: 2rem;
    ${styleFunctions}
    ${sx}
`

The as polymorphic prop allows switching out the element or component being rendered while keeping all the component styles. You can pass strings for HTML element names or functions for React components.

If you create your own styled-components, they will automatically have access to the as prop.

This renders a form fieldset element
<Box
    as="fieldset"
    backgroundColor="Secondary"
>
    This renders a form fieldset element
</Box>
<Box
    as="fieldset"
    backgroundColor="Secondary"
>
    This renders a form fieldset element
</Box>
Live Demo

This paragraph element has fancy heading styles
<Heading
    as="p"
    variant="Fancy"
>
    This paragraph element has fancy heading styles
</Heading>
<Heading
    as="p"
    variant="Fancy"
>
    This paragraph element has fancy heading styles
</Heading>
Live Demo

Helloworld
<Stack
    as={Link}
    padding={3}
    backgroundColor="Primary"
>
    <Text color="Secondary">
        Hello
    </Text>
    <Text color="Tertiary">
        world
    </Text>
</Stack>
<Stack
    as={Link}
    padding={3}
    backgroundColor="Primary"
>
    <Text color="Secondary">
        Hello
    </Text>
    <Text color="Tertiary">
        world
    </Text>
</Stack>
Live Demo