Contributor guidelines

Styling components

Avoid using the style prop and use emotion instead.

To style components with emotion in react-science components or in stories use one of the following strategies:

1. Styled components (preferred)

import { styled } from '@emotion/styled';

const DialogTitle = styled.h3`
  font-weight: bold;
`;

function MyDialog() {
  return (
    <Dialog>
      <Dialog.Header>
        <DialogTitle>Title</DialogTitle>
      </Dialog.Header>
    </Dialog>
  );
}

2. Inline css template string

Use to avoid naming things or to style react components:

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

function MyButton() {
  return (
    <Button
      css={css`
        margin-top: 32px;
      `}
    />
  );
}