UI Styling Standard

The eslint plugin to enforce and educate on Atlassian's UI Styling Standard

enforce-style-prop

Blocks providing static values through the style prop, which should only be used to provide dynamic values (values unknown at build time).

Use the css prop for providing static values instead.

Examples

Incorrect

import { token } from '@atlaskit/tokens';

const Component = () => (
    <div
        style={{
            margin: 0,
            color: token('color.text.danger'),
        }}
    />
);

Correct

Although token is a function call, it is statically resolvable by Compiled and should not be used in the style prop.

import { css } from '@compiled/react';
import { token } from '@atlaskit/tokens';

type Props = { width: string };

const baseStyles = css({ margin: 0, color: token('color.text.danger') });

const Component = ({ width }: Props) => (
    <div
        css={baseStyles}
        style={{
            width: props.width,
            '--my-nested-width': props.width,
        }}
    />
);

Was this page helpful?

We use this feedback to improve our documentation.